Conditions | 6 |
Paths | 6 |
Total Lines | 2416 |
Code Lines | 925 |
Lines | 2416 |
Ratio | 100 % |
Changes | 0 |
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
1 | /**! |
||
29 | }(this, (function () { 'use strict'; |
||
30 | |||
31 | var isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined'; |
||
32 | var longerTimeoutBrowsers = ['Edge', 'Trident', 'Firefox']; |
||
33 | var timeoutDuration = 0; |
||
34 | for (var i = 0; i < longerTimeoutBrowsers.length; i += 1) { |
||
35 | if (isBrowser && navigator.userAgent.indexOf(longerTimeoutBrowsers[i]) >= 0) { |
||
36 | timeoutDuration = 1; |
||
37 | break; |
||
38 | } |
||
39 | } |
||
40 | |||
41 | function microtaskDebounce(fn) { |
||
42 | var called = false; |
||
43 | return function () { |
||
44 | if (called) { |
||
45 | return; |
||
46 | } |
||
47 | called = true; |
||
48 | window.Promise.resolve().then(function () { |
||
49 | called = false; |
||
50 | fn(); |
||
51 | }); |
||
52 | }; |
||
53 | } |
||
54 | |||
55 | function taskDebounce(fn) { |
||
56 | var scheduled = false; |
||
57 | return function () { |
||
58 | if (!scheduled) { |
||
59 | scheduled = true; |
||
60 | setTimeout(function () { |
||
61 | scheduled = false; |
||
62 | fn(); |
||
63 | }, timeoutDuration); |
||
64 | } |
||
65 | }; |
||
66 | } |
||
67 | |||
68 | var supportsMicroTasks = isBrowser && window.Promise; |
||
69 | |||
70 | /** |
||
71 | * Create a debounced version of a method, that's asynchronously deferred |
||
72 | * but called in the minimum time possible. |
||
73 | * |
||
74 | * @method |
||
75 | * @memberof Popper.Utils |
||
76 | * @argument {Function} fn |
||
77 | * @returns {Function} |
||
78 | */ |
||
79 | var debounce = supportsMicroTasks ? microtaskDebounce : taskDebounce; |
||
80 | |||
81 | /** |
||
82 | * Check if the given variable is a function |
||
83 | * @method |
||
84 | * @memberof Popper.Utils |
||
85 | * @argument {Any} functionToCheck - variable to check |
||
86 | * @returns {Boolean} answer to: is a function? |
||
87 | */ |
||
88 | function isFunction(functionToCheck) { |
||
89 | var getType = {}; |
||
90 | return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]'; |
||
91 | } |
||
92 | |||
93 | /** |
||
94 | * Get CSS computed property of the given element |
||
95 | * @method |
||
96 | * @memberof Popper.Utils |
||
97 | * @argument {Eement} element |
||
98 | * @argument {String} property |
||
99 | */ |
||
100 | function getStyleComputedProperty(element, property) { |
||
101 | if (element.nodeType !== 1) { |
||
102 | return []; |
||
103 | } |
||
104 | // NOTE: 1 DOM access here |
||
105 | var css = getComputedStyle(element, null); |
||
106 | return property ? css[property] : css; |
||
107 | } |
||
108 | |||
109 | /** |
||
110 | * Returns the parentNode or the host of the element |
||
111 | * @method |
||
112 | * @memberof Popper.Utils |
||
113 | * @argument {Element} element |
||
114 | * @returns {Element} parent |
||
115 | */ |
||
116 | function getParentNode(element) { |
||
117 | if (element.nodeName === 'HTML') { |
||
118 | return element; |
||
119 | } |
||
120 | return element.parentNode || element.host; |
||
121 | } |
||
122 | |||
123 | /** |
||
124 | * Returns the scrolling parent of the given element |
||
125 | * @method |
||
126 | * @memberof Popper.Utils |
||
127 | * @argument {Element} element |
||
128 | * @returns {Element} scroll parent |
||
129 | */ |
||
130 | function getScrollParent(element) { |
||
131 | // Return body, `getScroll` will take care to get the correct `scrollTop` from it |
||
132 | if (!element) { |
||
133 | return document.body; |
||
134 | } |
||
135 | |||
136 | switch (element.nodeName) { |
||
137 | case 'HTML': |
||
138 | case 'BODY': |
||
139 | return element.ownerDocument.body; |
||
140 | case '#document': |
||
141 | return element.body; |
||
142 | } |
||
143 | |||
144 | // Firefox want us to check `-x` and `-y` variations as well |
||
145 | |||
146 | var _getStyleComputedProp = getStyleComputedProperty(element), |
||
147 | overflow = _getStyleComputedProp.overflow, |
||
148 | overflowX = _getStyleComputedProp.overflowX, |
||
149 | overflowY = _getStyleComputedProp.overflowY; |
||
150 | |||
151 | if (/(auto|scroll)/.test(overflow + overflowY + overflowX)) { |
||
152 | return element; |
||
153 | } |
||
154 | |||
155 | return getScrollParent(getParentNode(element)); |
||
156 | } |
||
157 | |||
158 | /** |
||
159 | * Returns the offset parent of the given element |
||
160 | * @method |
||
161 | * @memberof Popper.Utils |
||
162 | * @argument {Element} element |
||
163 | * @returns {Element} offset parent |
||
164 | */ |
||
165 | function getOffsetParent(element) { |
||
166 | // NOTE: 1 DOM access here |
||
167 | var offsetParent = element && element.offsetParent; |
||
168 | var nodeName = offsetParent && offsetParent.nodeName; |
||
169 | |||
170 | if (!nodeName || nodeName === 'BODY' || nodeName === 'HTML') { |
||
171 | if (element) { |
||
172 | return element.ownerDocument.documentElement; |
||
173 | } |
||
174 | |||
175 | return document.documentElement; |
||
176 | } |
||
177 | |||
178 | // .offsetParent will return the closest TD or TABLE in case |
||
179 | // no offsetParent is present, I hate this job... |
||
180 | if (['TD', 'TABLE'].indexOf(offsetParent.nodeName) !== -1 && getStyleComputedProperty(offsetParent, 'position') === 'static') { |
||
181 | return getOffsetParent(offsetParent); |
||
182 | } |
||
183 | |||
184 | return offsetParent; |
||
185 | } |
||
186 | |||
187 | function isOffsetContainer(element) { |
||
188 | var nodeName = element.nodeName; |
||
189 | |||
190 | if (nodeName === 'BODY') { |
||
191 | return false; |
||
192 | } |
||
193 | return nodeName === 'HTML' || getOffsetParent(element.firstElementChild) === element; |
||
194 | } |
||
195 | |||
196 | /** |
||
197 | * Finds the root node (document, shadowDOM root) of the given element |
||
198 | * @method |
||
199 | * @memberof Popper.Utils |
||
200 | * @argument {Element} node |
||
201 | * @returns {Element} root node |
||
202 | */ |
||
203 | function getRoot(node) { |
||
204 | if (node.parentNode !== null) { |
||
205 | return getRoot(node.parentNode); |
||
206 | } |
||
207 | |||
208 | return node; |
||
209 | } |
||
210 | |||
211 | /** |
||
212 | * Finds the offset parent common to the two provided nodes |
||
213 | * @method |
||
214 | * @memberof Popper.Utils |
||
215 | * @argument {Element} element1 |
||
216 | * @argument {Element} element2 |
||
217 | * @returns {Element} common offset parent |
||
218 | */ |
||
219 | function findCommonOffsetParent(element1, element2) { |
||
220 | // This check is needed to avoid errors in case one of the elements isn't defined for any reason |
||
221 | if (!element1 || !element1.nodeType || !element2 || !element2.nodeType) { |
||
222 | return document.documentElement; |
||
223 | } |
||
224 | |||
225 | // Here we make sure to give as "start" the element that comes first in the DOM |
||
226 | var order = element1.compareDocumentPosition(element2) & Node.DOCUMENT_POSITION_FOLLOWING; |
||
227 | var start = order ? element1 : element2; |
||
228 | var end = order ? element2 : element1; |
||
229 | |||
230 | // Get common ancestor container |
||
231 | var range = document.createRange(); |
||
232 | range.setStart(start, 0); |
||
233 | range.setEnd(end, 0); |
||
234 | var commonAncestorContainer = range.commonAncestorContainer; |
||
235 | |||
236 | // Both nodes are inside #document |
||
237 | |||
238 | if (element1 !== commonAncestorContainer && element2 !== commonAncestorContainer || start.contains(end)) { |
||
239 | if (isOffsetContainer(commonAncestorContainer)) { |
||
240 | return commonAncestorContainer; |
||
241 | } |
||
242 | |||
243 | return getOffsetParent(commonAncestorContainer); |
||
244 | } |
||
245 | |||
246 | // one of the nodes is inside shadowDOM, find which one |
||
247 | var element1root = getRoot(element1); |
||
248 | if (element1root.host) { |
||
249 | return findCommonOffsetParent(element1root.host, element2); |
||
250 | } else { |
||
251 | return findCommonOffsetParent(element1, getRoot(element2).host); |
||
252 | } |
||
253 | } |
||
254 | |||
255 | /** |
||
256 | * Gets the scroll value of the given element in the given side (top and left) |
||
257 | * @method |
||
258 | * @memberof Popper.Utils |
||
259 | * @argument {Element} element |
||
260 | * @argument {String} side `top` or `left` |
||
261 | * @returns {number} amount of scrolled pixels |
||
262 | */ |
||
263 | function getScroll(element) { |
||
264 | var side = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'top'; |
||
265 | |||
266 | var upperSide = side === 'top' ? 'scrollTop' : 'scrollLeft'; |
||
267 | var nodeName = element.nodeName; |
||
268 | |||
269 | if (nodeName === 'BODY' || nodeName === 'HTML') { |
||
270 | var html = element.ownerDocument.documentElement; |
||
271 | var scrollingElement = element.ownerDocument.scrollingElement || html; |
||
272 | return scrollingElement[upperSide]; |
||
273 | } |
||
274 | |||
275 | return element[upperSide]; |
||
276 | } |
||
277 | |||
278 | /* |
||
279 | * Sum or subtract the element scroll values (left and top) from a given rect object |
||
280 | * @method |
||
281 | * @memberof Popper.Utils |
||
282 | * @param {Object} rect - Rect object you want to change |
||
283 | * @param {HTMLElement} element - The element from the function reads the scroll values |
||
284 | * @param {Boolean} subtract - set to true if you want to subtract the scroll values |
||
285 | * @return {Object} rect - The modifier rect object |
||
286 | */ |
||
287 | function includeScroll(rect, element) { |
||
288 | var subtract = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false; |
||
289 | |||
290 | var scrollTop = getScroll(element, 'top'); |
||
291 | var scrollLeft = getScroll(element, 'left'); |
||
292 | var modifier = subtract ? -1 : 1; |
||
293 | rect.top += scrollTop * modifier; |
||
294 | rect.bottom += scrollTop * modifier; |
||
295 | rect.left += scrollLeft * modifier; |
||
296 | rect.right += scrollLeft * modifier; |
||
297 | return rect; |
||
298 | } |
||
299 | |||
300 | /* |
||
301 | * Helper to detect borders of a given element |
||
302 | * @method |
||
303 | * @memberof Popper.Utils |
||
304 | * @param {CSSStyleDeclaration} styles |
||
305 | * Result of `getStyleComputedProperty` on the given element |
||
306 | * @param {String} axis - `x` or `y` |
||
307 | * @return {number} borders - The borders size of the given axis |
||
308 | */ |
||
309 | |||
310 | function getBordersSize(styles, axis) { |
||
311 | var sideA = axis === 'x' ? 'Left' : 'Top'; |
||
312 | var sideB = sideA === 'Left' ? 'Right' : 'Bottom'; |
||
313 | |||
314 | return parseFloat(styles['border' + sideA + 'Width'], 10) + parseFloat(styles['border' + sideB + 'Width'], 10); |
||
315 | } |
||
316 | |||
317 | /** |
||
318 | * Tells if you are running Internet Explorer 10 |
||
319 | * @method |
||
320 | * @memberof Popper.Utils |
||
321 | * @returns {Boolean} isIE10 |
||
322 | */ |
||
323 | var isIE10 = undefined; |
||
324 | |||
325 | var isIE10$1 = function () { |
||
326 | if (isIE10 === undefined) { |
||
327 | isIE10 = navigator.appVersion.indexOf('MSIE 10') !== -1; |
||
328 | } |
||
329 | return isIE10; |
||
330 | }; |
||
331 | |||
332 | function getSize(axis, body, html, computedStyle) { |
||
333 | return Math.max(body['offset' + axis], body['scroll' + axis], html['client' + axis], html['offset' + axis], html['scroll' + axis], isIE10$1() ? html['offset' + axis] + computedStyle['margin' + (axis === 'Height' ? 'Top' : 'Left')] + computedStyle['margin' + (axis === 'Height' ? 'Bottom' : 'Right')] : 0); |
||
334 | } |
||
335 | |||
336 | function getWindowSizes() { |
||
337 | var body = document.body; |
||
338 | var html = document.documentElement; |
||
339 | var computedStyle = isIE10$1() && getComputedStyle(html); |
||
340 | |||
341 | return { |
||
342 | height: getSize('Height', body, html, computedStyle), |
||
343 | width: getSize('Width', body, html, computedStyle) |
||
344 | }; |
||
345 | } |
||
346 | |||
347 | var classCallCheck = function (instance, Constructor) { |
||
348 | if (!(instance instanceof Constructor)) { |
||
349 | throw new TypeError("Cannot call a class as a function"); |
||
350 | } |
||
351 | }; |
||
352 | |||
353 | var createClass = function () { |
||
354 | function defineProperties(target, props) { |
||
355 | for (var i = 0; i < props.length; i++) { |
||
356 | var descriptor = props[i]; |
||
357 | descriptor.enumerable = descriptor.enumerable || false; |
||
358 | descriptor.configurable = true; |
||
359 | if ("value" in descriptor) descriptor.writable = true; |
||
360 | Object.defineProperty(target, descriptor.key, descriptor); |
||
361 | } |
||
362 | } |
||
363 | |||
364 | return function (Constructor, protoProps, staticProps) { |
||
365 | if (protoProps) defineProperties(Constructor.prototype, protoProps); |
||
366 | if (staticProps) defineProperties(Constructor, staticProps); |
||
367 | return Constructor; |
||
368 | }; |
||
369 | }(); |
||
370 | |||
371 | |||
372 | |||
373 | |||
374 | |||
375 | var defineProperty = function (obj, key, value) { |
||
376 | if (key in obj) { |
||
377 | Object.defineProperty(obj, key, { |
||
378 | value: value, |
||
379 | enumerable: true, |
||
380 | configurable: true, |
||
381 | writable: true |
||
382 | }); |
||
383 | } else { |
||
384 | obj[key] = value; |
||
385 | } |
||
386 | |||
387 | return obj; |
||
388 | }; |
||
389 | |||
390 | var _extends = Object.assign || function (target) { |
||
391 | for (var i = 1; i < arguments.length; i++) { |
||
392 | var source = arguments[i]; |
||
393 | |||
394 | for (var key in source) { |
||
395 | if (Object.prototype.hasOwnProperty.call(source, key)) { |
||
396 | target[key] = source[key]; |
||
397 | } |
||
398 | } |
||
399 | } |
||
400 | |||
401 | return target; |
||
402 | }; |
||
403 | |||
404 | /** |
||
405 | * Given element offsets, generate an output similar to getBoundingClientRect |
||
406 | * @method |
||
407 | * @memberof Popper.Utils |
||
408 | * @argument {Object} offsets |
||
409 | * @returns {Object} ClientRect like output |
||
410 | */ |
||
411 | function getClientRect(offsets) { |
||
412 | return _extends({}, offsets, { |
||
413 | right: offsets.left + offsets.width, |
||
414 | bottom: offsets.top + offsets.height |
||
415 | }); |
||
416 | } |
||
417 | |||
418 | /** |
||
419 | * Get bounding client rect of given element |
||
420 | * @method |
||
421 | * @memberof Popper.Utils |
||
422 | * @param {HTMLElement} element |
||
423 | * @return {Object} client rect |
||
424 | */ |
||
425 | function getBoundingClientRect(element) { |
||
426 | var rect = {}; |
||
427 | |||
428 | // IE10 10 FIX: Please, don't ask, the element isn't |
||
429 | // considered in DOM in some circumstances... |
||
430 | // This isn't reproducible in IE10 compatibility mode of IE11 |
||
431 | if (isIE10$1()) { |
||
432 | try { |
||
433 | rect = element.getBoundingClientRect(); |
||
434 | var scrollTop = getScroll(element, 'top'); |
||
435 | var scrollLeft = getScroll(element, 'left'); |
||
436 | rect.top += scrollTop; |
||
437 | rect.left += scrollLeft; |
||
438 | rect.bottom += scrollTop; |
||
439 | rect.right += scrollLeft; |
||
440 | } catch (err) {} |
||
441 | } else { |
||
442 | rect = element.getBoundingClientRect(); |
||
443 | } |
||
444 | |||
445 | var result = { |
||
446 | left: rect.left, |
||
447 | top: rect.top, |
||
448 | width: rect.right - rect.left, |
||
449 | height: rect.bottom - rect.top |
||
450 | }; |
||
451 | |||
452 | // subtract scrollbar size from sizes |
||
453 | var sizes = element.nodeName === 'HTML' ? getWindowSizes() : {}; |
||
454 | var width = sizes.width || element.clientWidth || result.right - result.left; |
||
455 | var height = sizes.height || element.clientHeight || result.bottom - result.top; |
||
456 | |||
457 | var horizScrollbar = element.offsetWidth - width; |
||
458 | var vertScrollbar = element.offsetHeight - height; |
||
459 | |||
460 | // if an hypothetical scrollbar is detected, we must be sure it's not a `border` |
||
461 | // we make this check conditional for performance reasons |
||
462 | if (horizScrollbar || vertScrollbar) { |
||
463 | var styles = getStyleComputedProperty(element); |
||
464 | horizScrollbar -= getBordersSize(styles, 'x'); |
||
465 | vertScrollbar -= getBordersSize(styles, 'y'); |
||
466 | |||
467 | result.width -= horizScrollbar; |
||
468 | result.height -= vertScrollbar; |
||
469 | } |
||
470 | |||
471 | return getClientRect(result); |
||
472 | } |
||
473 | |||
474 | function getOffsetRectRelativeToArbitraryNode(children, parent) { |
||
475 | var isIE10 = isIE10$1(); |
||
476 | var isHTML = parent.nodeName === 'HTML'; |
||
477 | var childrenRect = getBoundingClientRect(children); |
||
478 | var parentRect = getBoundingClientRect(parent); |
||
479 | var scrollParent = getScrollParent(children); |
||
480 | |||
481 | var styles = getStyleComputedProperty(parent); |
||
482 | var borderTopWidth = parseFloat(styles.borderTopWidth, 10); |
||
483 | var borderLeftWidth = parseFloat(styles.borderLeftWidth, 10); |
||
484 | |||
485 | var offsets = getClientRect({ |
||
486 | top: childrenRect.top - parentRect.top - borderTopWidth, |
||
487 | left: childrenRect.left - parentRect.left - borderLeftWidth, |
||
488 | width: childrenRect.width, |
||
489 | height: childrenRect.height |
||
490 | }); |
||
491 | offsets.marginTop = 0; |
||
492 | offsets.marginLeft = 0; |
||
493 | |||
494 | // Subtract margins of documentElement in case it's being used as parent |
||
495 | // we do this only on HTML because it's the only element that behaves |
||
496 | // differently when margins are applied to it. The margins are included in |
||
497 | // the box of the documentElement, in the other cases not. |
||
498 | if (!isIE10 && isHTML) { |
||
499 | var marginTop = parseFloat(styles.marginTop, 10); |
||
500 | var marginLeft = parseFloat(styles.marginLeft, 10); |
||
501 | |||
502 | offsets.top -= borderTopWidth - marginTop; |
||
503 | offsets.bottom -= borderTopWidth - marginTop; |
||
504 | offsets.left -= borderLeftWidth - marginLeft; |
||
505 | offsets.right -= borderLeftWidth - marginLeft; |
||
506 | |||
507 | // Attach marginTop and marginLeft because in some circumstances we may need them |
||
508 | offsets.marginTop = marginTop; |
||
509 | offsets.marginLeft = marginLeft; |
||
510 | } |
||
511 | |||
512 | if (isIE10 ? parent.contains(scrollParent) : parent === scrollParent && scrollParent.nodeName !== 'BODY') { |
||
513 | offsets = includeScroll(offsets, parent); |
||
514 | } |
||
515 | |||
516 | return offsets; |
||
517 | } |
||
518 | |||
519 | function getViewportOffsetRectRelativeToArtbitraryNode(element) { |
||
520 | var html = element.ownerDocument.documentElement; |
||
521 | var relativeOffset = getOffsetRectRelativeToArbitraryNode(element, html); |
||
522 | var width = Math.max(html.clientWidth, window.innerWidth || 0); |
||
523 | var height = Math.max(html.clientHeight, window.innerHeight || 0); |
||
524 | |||
525 | var scrollTop = getScroll(html); |
||
526 | var scrollLeft = getScroll(html, 'left'); |
||
527 | |||
528 | var offset = { |
||
529 | top: scrollTop - relativeOffset.top + relativeOffset.marginTop, |
||
530 | left: scrollLeft - relativeOffset.left + relativeOffset.marginLeft, |
||
531 | width: width, |
||
532 | height: height |
||
533 | }; |
||
534 | |||
535 | return getClientRect(offset); |
||
536 | } |
||
537 | |||
538 | /** |
||
539 | * Check if the given element is fixed or is inside a fixed parent |
||
540 | * @method |
||
541 | * @memberof Popper.Utils |
||
542 | * @argument {Element} element |
||
543 | * @argument {Element} customContainer |
||
544 | * @returns {Boolean} answer to "isFixed?" |
||
545 | */ |
||
546 | function isFixed(element) { |
||
547 | var nodeName = element.nodeName; |
||
548 | if (nodeName === 'BODY' || nodeName === 'HTML') { |
||
549 | return false; |
||
550 | } |
||
551 | if (getStyleComputedProperty(element, 'position') === 'fixed') { |
||
552 | return true; |
||
553 | } |
||
554 | return isFixed(getParentNode(element)); |
||
555 | } |
||
556 | |||
557 | /** |
||
558 | * Computed the boundaries limits and return them |
||
559 | * @method |
||
560 | * @memberof Popper.Utils |
||
561 | * @param {HTMLElement} popper |
||
562 | * @param {HTMLElement} reference |
||
563 | * @param {number} padding |
||
564 | * @param {HTMLElement} boundariesElement - Element used to define the boundaries |
||
565 | * @returns {Object} Coordinates of the boundaries |
||
566 | */ |
||
567 | function getBoundaries(popper, reference, padding, boundariesElement) { |
||
568 | // NOTE: 1 DOM access here |
||
569 | var boundaries = { top: 0, left: 0 }; |
||
570 | var offsetParent = findCommonOffsetParent(popper, reference); |
||
571 | |||
572 | // Handle viewport case |
||
573 | if (boundariesElement === 'viewport') { |
||
574 | boundaries = getViewportOffsetRectRelativeToArtbitraryNode(offsetParent); |
||
575 | } else { |
||
576 | // Handle other cases based on DOM element used as boundaries |
||
577 | var boundariesNode = void 0; |
||
578 | if (boundariesElement === 'scrollParent') { |
||
579 | boundariesNode = getScrollParent(getParentNode(reference)); |
||
580 | if (boundariesNode.nodeName === 'BODY') { |
||
581 | boundariesNode = popper.ownerDocument.documentElement; |
||
582 | } |
||
583 | } else if (boundariesElement === 'window') { |
||
584 | boundariesNode = popper.ownerDocument.documentElement; |
||
585 | } else { |
||
586 | boundariesNode = boundariesElement; |
||
587 | } |
||
588 | |||
589 | var offsets = getOffsetRectRelativeToArbitraryNode(boundariesNode, offsetParent); |
||
590 | |||
591 | // In case of HTML, we need a different computation |
||
592 | if (boundariesNode.nodeName === 'HTML' && !isFixed(offsetParent)) { |
||
593 | var _getWindowSizes = getWindowSizes(), |
||
594 | height = _getWindowSizes.height, |
||
595 | width = _getWindowSizes.width; |
||
596 | |||
597 | boundaries.top += offsets.top - offsets.marginTop; |
||
598 | boundaries.bottom = height + offsets.top; |
||
599 | boundaries.left += offsets.left - offsets.marginLeft; |
||
600 | boundaries.right = width + offsets.left; |
||
601 | } else { |
||
602 | // for all the other DOM elements, this one is good |
||
603 | boundaries = offsets; |
||
604 | } |
||
605 | } |
||
606 | |||
607 | // Add paddings |
||
608 | boundaries.left += padding; |
||
609 | boundaries.top += padding; |
||
610 | boundaries.right -= padding; |
||
611 | boundaries.bottom -= padding; |
||
612 | |||
613 | return boundaries; |
||
614 | } |
||
615 | |||
616 | function getArea(_ref) { |
||
617 | var width = _ref.width, |
||
618 | height = _ref.height; |
||
619 | |||
620 | return width * height; |
||
621 | } |
||
622 | |||
623 | /** |
||
624 | * Utility used to transform the `auto` placement to the placement with more |
||
625 | * available space. |
||
626 | * @method |
||
627 | * @memberof Popper.Utils |
||
628 | * @argument {Object} data - The data object generated by update method |
||
629 | * @argument {Object} options - Modifiers configuration and options |
||
630 | * @returns {Object} The data object, properly modified |
||
631 | */ |
||
632 | function computeAutoPlacement(placement, refRect, popper, reference, boundariesElement) { |
||
633 | var padding = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0; |
||
634 | |||
635 | if (placement.indexOf('auto') === -1) { |
||
636 | return placement; |
||
637 | } |
||
638 | |||
639 | var boundaries = getBoundaries(popper, reference, padding, boundariesElement); |
||
640 | |||
641 | var rects = { |
||
642 | top: { |
||
643 | width: boundaries.width, |
||
644 | height: refRect.top - boundaries.top |
||
645 | }, |
||
646 | right: { |
||
647 | width: boundaries.right - refRect.right, |
||
648 | height: boundaries.height |
||
649 | }, |
||
650 | bottom: { |
||
651 | width: boundaries.width, |
||
652 | height: boundaries.bottom - refRect.bottom |
||
653 | }, |
||
654 | left: { |
||
655 | width: refRect.left - boundaries.left, |
||
656 | height: boundaries.height |
||
657 | } |
||
658 | }; |
||
659 | |||
660 | var sortedAreas = Object.keys(rects).map(function (key) { |
||
661 | return _extends({ |
||
662 | key: key |
||
663 | }, rects[key], { |
||
664 | area: getArea(rects[key]) |
||
665 | }); |
||
666 | }).sort(function (a, b) { |
||
667 | return b.area - a.area; |
||
668 | }); |
||
669 | |||
670 | var filteredAreas = sortedAreas.filter(function (_ref2) { |
||
671 | var width = _ref2.width, |
||
672 | height = _ref2.height; |
||
673 | return width >= popper.clientWidth && height >= popper.clientHeight; |
||
674 | }); |
||
675 | |||
676 | var computedPlacement = filteredAreas.length > 0 ? filteredAreas[0].key : sortedAreas[0].key; |
||
677 | |||
678 | var variation = placement.split('-')[1]; |
||
679 | |||
680 | return computedPlacement + (variation ? '-' + variation : ''); |
||
681 | } |
||
682 | |||
683 | /** |
||
684 | * Get offsets to the reference element |
||
685 | * @method |
||
686 | * @memberof Popper.Utils |
||
687 | * @param {Object} state |
||
688 | * @param {Element} popper - the popper element |
||
689 | * @param {Element} reference - the reference element (the popper will be relative to this) |
||
690 | * @returns {Object} An object containing the offsets which will be applied to the popper |
||
691 | */ |
||
692 | function getReferenceOffsets(state, popper, reference) { |
||
693 | var commonOffsetParent = findCommonOffsetParent(popper, reference); |
||
694 | return getOffsetRectRelativeToArbitraryNode(reference, commonOffsetParent); |
||
695 | } |
||
696 | |||
697 | /** |
||
698 | * Get the outer sizes of the given element (offset size + margins) |
||
699 | * @method |
||
700 | * @memberof Popper.Utils |
||
701 | * @argument {Element} element |
||
702 | * @returns {Object} object containing width and height properties |
||
703 | */ |
||
704 | function getOuterSizes(element) { |
||
705 | var styles = getComputedStyle(element); |
||
706 | var x = parseFloat(styles.marginTop) + parseFloat(styles.marginBottom); |
||
707 | var y = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight); |
||
708 | var result = { |
||
709 | width: element.offsetWidth + y, |
||
710 | height: element.offsetHeight + x |
||
711 | }; |
||
712 | return result; |
||
713 | } |
||
714 | |||
715 | /** |
||
716 | * Get the opposite placement of the given one |
||
717 | * @method |
||
718 | * @memberof Popper.Utils |
||
719 | * @argument {String} placement |
||
720 | * @returns {String} flipped placement |
||
721 | */ |
||
722 | function getOppositePlacement(placement) { |
||
723 | var hash = { left: 'right', right: 'left', bottom: 'top', top: 'bottom' }; |
||
724 | return placement.replace(/left|right|bottom|top/g, function (matched) { |
||
725 | return hash[matched]; |
||
726 | }); |
||
727 | } |
||
728 | |||
729 | /** |
||
730 | * Get offsets to the popper |
||
731 | * @method |
||
732 | * @memberof Popper.Utils |
||
733 | * @param {Object} position - CSS position the Popper will get applied |
||
734 | * @param {HTMLElement} popper - the popper element |
||
735 | * @param {Object} referenceOffsets - the reference offsets (the popper will be relative to this) |
||
736 | * @param {String} placement - one of the valid placement options |
||
737 | * @returns {Object} popperOffsets - An object containing the offsets which will be applied to the popper |
||
738 | */ |
||
739 | function getPopperOffsets(popper, referenceOffsets, placement) { |
||
740 | placement = placement.split('-')[0]; |
||
741 | |||
742 | // Get popper node sizes |
||
743 | var popperRect = getOuterSizes(popper); |
||
744 | |||
745 | // Add position, width and height to our offsets object |
||
746 | var popperOffsets = { |
||
747 | width: popperRect.width, |
||
748 | height: popperRect.height |
||
749 | }; |
||
750 | |||
751 | // depending by the popper placement we have to compute its offsets slightly differently |
||
752 | var isHoriz = ['right', 'left'].indexOf(placement) !== -1; |
||
753 | var mainSide = isHoriz ? 'top' : 'left'; |
||
754 | var secondarySide = isHoriz ? 'left' : 'top'; |
||
755 | var measurement = isHoriz ? 'height' : 'width'; |
||
756 | var secondaryMeasurement = !isHoriz ? 'height' : 'width'; |
||
757 | |||
758 | popperOffsets[mainSide] = referenceOffsets[mainSide] + referenceOffsets[measurement] / 2 - popperRect[measurement] / 2; |
||
759 | if (placement === secondarySide) { |
||
760 | popperOffsets[secondarySide] = referenceOffsets[secondarySide] - popperRect[secondaryMeasurement]; |
||
761 | } else { |
||
762 | popperOffsets[secondarySide] = referenceOffsets[getOppositePlacement(secondarySide)]; |
||
763 | } |
||
764 | |||
765 | return popperOffsets; |
||
766 | } |
||
767 | |||
768 | /** |
||
769 | * Mimics the `find` method of Array |
||
770 | * @method |
||
771 | * @memberof Popper.Utils |
||
772 | * @argument {Array} arr |
||
773 | * @argument prop |
||
774 | * @argument value |
||
775 | * @returns index or -1 |
||
776 | */ |
||
777 | function find(arr, check) { |
||
778 | // use native find if supported |
||
779 | if (Array.prototype.find) { |
||
780 | return arr.find(check); |
||
781 | } |
||
782 | |||
783 | // use `filter` to obtain the same behavior of `find` |
||
784 | return arr.filter(check)[0]; |
||
785 | } |
||
786 | |||
787 | /** |
||
788 | * Return the index of the matching object |
||
789 | * @method |
||
790 | * @memberof Popper.Utils |
||
791 | * @argument {Array} arr |
||
792 | * @argument prop |
||
793 | * @argument value |
||
794 | * @returns index or -1 |
||
795 | */ |
||
796 | function findIndex(arr, prop, value) { |
||
797 | // use native findIndex if supported |
||
798 | if (Array.prototype.findIndex) { |
||
799 | return arr.findIndex(function (cur) { |
||
800 | return cur[prop] === value; |
||
801 | }); |
||
802 | } |
||
803 | |||
804 | // use `find` + `indexOf` if `findIndex` isn't supported |
||
805 | var match = find(arr, function (obj) { |
||
806 | return obj[prop] === value; |
||
807 | }); |
||
808 | return arr.indexOf(match); |
||
809 | } |
||
810 | |||
811 | /** |
||
812 | * Loop trough the list of modifiers and run them in order, |
||
813 | * each of them will then edit the data object. |
||
814 | * @method |
||
815 | * @memberof Popper.Utils |
||
816 | * @param {dataObject} data |
||
817 | * @param {Array} modifiers |
||
818 | * @param {String} ends - Optional modifier name used as stopper |
||
819 | * @returns {dataObject} |
||
820 | */ |
||
821 | function runModifiers(modifiers, data, ends) { |
||
822 | var modifiersToRun = ends === undefined ? modifiers : modifiers.slice(0, findIndex(modifiers, 'name', ends)); |
||
823 | |||
824 | modifiersToRun.forEach(function (modifier) { |
||
825 | if (modifier['function']) { |
||
826 | // eslint-disable-line dot-notation |
||
827 | console.warn('`modifier.function` is deprecated, use `modifier.fn`!'); |
||
828 | } |
||
829 | var fn = modifier['function'] || modifier.fn; // eslint-disable-line dot-notation |
||
830 | if (modifier.enabled && isFunction(fn)) { |
||
831 | // Add properties to offsets to make them a complete clientRect object |
||
832 | // we do this before each modifier to make sure the previous one doesn't |
||
833 | // mess with these values |
||
834 | data.offsets.popper = getClientRect(data.offsets.popper); |
||
835 | data.offsets.reference = getClientRect(data.offsets.reference); |
||
836 | |||
837 | data = fn(data, modifier); |
||
838 | } |
||
839 | }); |
||
840 | |||
841 | return data; |
||
842 | } |
||
843 | |||
844 | /** |
||
845 | * Updates the position of the popper, computing the new offsets and applying |
||
846 | * the new style.<br /> |
||
847 | * Prefer `scheduleUpdate` over `update` because of performance reasons. |
||
848 | * @method |
||
849 | * @memberof Popper |
||
850 | */ |
||
851 | function update() { |
||
852 | // if popper is destroyed, don't perform any further update |
||
853 | if (this.state.isDestroyed) { |
||
854 | return; |
||
855 | } |
||
856 | |||
857 | var data = { |
||
858 | instance: this, |
||
859 | styles: {}, |
||
860 | arrowStyles: {}, |
||
861 | attributes: {}, |
||
862 | flipped: false, |
||
863 | offsets: {} |
||
864 | }; |
||
865 | |||
866 | // compute reference element offsets |
||
867 | data.offsets.reference = getReferenceOffsets(this.state, this.popper, this.reference); |
||
868 | |||
869 | // compute auto placement, store placement inside the data object, |
||
870 | // modifiers will be able to edit `placement` if needed |
||
871 | // and refer to originalPlacement to know the original value |
||
872 | data.placement = computeAutoPlacement(this.options.placement, data.offsets.reference, this.popper, this.reference, this.options.modifiers.flip.boundariesElement, this.options.modifiers.flip.padding); |
||
873 | |||
874 | // store the computed placement inside `originalPlacement` |
||
875 | data.originalPlacement = data.placement; |
||
876 | |||
877 | // compute the popper offsets |
||
878 | data.offsets.popper = getPopperOffsets(this.popper, data.offsets.reference, data.placement); |
||
879 | data.offsets.popper.position = 'absolute'; |
||
880 | |||
881 | // run the modifiers |
||
882 | data = runModifiers(this.modifiers, data); |
||
883 | |||
884 | // the first `update` will call `onCreate` callback |
||
885 | // the other ones will call `onUpdate` callback |
||
886 | if (!this.state.isCreated) { |
||
887 | this.state.isCreated = true; |
||
888 | this.options.onCreate(data); |
||
889 | } else { |
||
890 | this.options.onUpdate(data); |
||
891 | } |
||
892 | } |
||
893 | |||
894 | /** |
||
895 | * Helper used to know if the given modifier is enabled. |
||
896 | * @method |
||
897 | * @memberof Popper.Utils |
||
898 | * @returns {Boolean} |
||
899 | */ |
||
900 | function isModifierEnabled(modifiers, modifierName) { |
||
901 | return modifiers.some(function (_ref) { |
||
902 | var name = _ref.name, |
||
903 | enabled = _ref.enabled; |
||
904 | return enabled && name === modifierName; |
||
905 | }); |
||
906 | } |
||
907 | |||
908 | /** |
||
909 | * Get the prefixed supported property name |
||
910 | * @method |
||
911 | * @memberof Popper.Utils |
||
912 | * @argument {String} property (camelCase) |
||
913 | * @returns {String} prefixed property (camelCase or PascalCase, depending on the vendor prefix) |
||
914 | */ |
||
915 | function getSupportedPropertyName(property) { |
||
916 | var prefixes = [false, 'ms', 'Webkit', 'Moz', 'O']; |
||
917 | var upperProp = property.charAt(0).toUpperCase() + property.slice(1); |
||
918 | |||
919 | for (var i = 0; i < prefixes.length - 1; i++) { |
||
920 | var prefix = prefixes[i]; |
||
921 | var toCheck = prefix ? '' + prefix + upperProp : property; |
||
922 | if (typeof document.body.style[toCheck] !== 'undefined') { |
||
923 | return toCheck; |
||
924 | } |
||
925 | } |
||
926 | return null; |
||
927 | } |
||
928 | |||
929 | /** |
||
930 | * Destroy the popper |
||
931 | * @method |
||
932 | * @memberof Popper |
||
933 | */ |
||
934 | function destroy() { |
||
935 | this.state.isDestroyed = true; |
||
936 | |||
937 | // touch DOM only if `applyStyle` modifier is enabled |
||
938 | if (isModifierEnabled(this.modifiers, 'applyStyle')) { |
||
939 | this.popper.removeAttribute('x-placement'); |
||
940 | this.popper.style.left = ''; |
||
941 | this.popper.style.position = ''; |
||
942 | this.popper.style.top = ''; |
||
943 | this.popper.style[getSupportedPropertyName('transform')] = ''; |
||
944 | } |
||
945 | |||
946 | this.disableEventListeners(); |
||
947 | |||
948 | // remove the popper if user explicity asked for the deletion on destroy |
||
949 | // do not use `remove` because IE11 doesn't support it |
||
950 | if (this.options.removeOnDestroy) { |
||
951 | this.popper.parentNode.removeChild(this.popper); |
||
952 | } |
||
953 | return this; |
||
954 | } |
||
955 | |||
956 | /** |
||
957 | * Get the window associated with the element |
||
958 | * @argument {Element} element |
||
959 | * @returns {Window} |
||
960 | */ |
||
961 | function getWindow(element) { |
||
962 | var ownerDocument = element.ownerDocument; |
||
963 | return ownerDocument ? ownerDocument.defaultView : window; |
||
964 | } |
||
965 | |||
966 | function attachToScrollParents(scrollParent, event, callback, scrollParents) { |
||
967 | var isBody = scrollParent.nodeName === 'BODY'; |
||
968 | var target = isBody ? scrollParent.ownerDocument.defaultView : scrollParent; |
||
969 | target.addEventListener(event, callback, { passive: true }); |
||
970 | |||
971 | if (!isBody) { |
||
972 | attachToScrollParents(getScrollParent(target.parentNode), event, callback, scrollParents); |
||
973 | } |
||
974 | scrollParents.push(target); |
||
975 | } |
||
976 | |||
977 | /** |
||
978 | * Setup needed event listeners used to update the popper position |
||
979 | * @method |
||
980 | * @memberof Popper.Utils |
||
981 | * @private |
||
982 | */ |
||
983 | function setupEventListeners(reference, options, state, updateBound) { |
||
984 | // Resize event listener on window |
||
985 | state.updateBound = updateBound; |
||
986 | getWindow(reference).addEventListener('resize', state.updateBound, { passive: true }); |
||
987 | |||
988 | // Scroll event listener on scroll parents |
||
989 | var scrollElement = getScrollParent(reference); |
||
990 | attachToScrollParents(scrollElement, 'scroll', state.updateBound, state.scrollParents); |
||
991 | state.scrollElement = scrollElement; |
||
992 | state.eventsEnabled = true; |
||
993 | |||
994 | return state; |
||
995 | } |
||
996 | |||
997 | /** |
||
998 | * It will add resize/scroll events and start recalculating |
||
999 | * position of the popper element when they are triggered. |
||
1000 | * @method |
||
1001 | * @memberof Popper |
||
1002 | */ |
||
1003 | function enableEventListeners() { |
||
1004 | if (!this.state.eventsEnabled) { |
||
1005 | this.state = setupEventListeners(this.reference, this.options, this.state, this.scheduleUpdate); |
||
1006 | } |
||
1007 | } |
||
1008 | |||
1009 | /** |
||
1010 | * Remove event listeners used to update the popper position |
||
1011 | * @method |
||
1012 | * @memberof Popper.Utils |
||
1013 | * @private |
||
1014 | */ |
||
1015 | function removeEventListeners(reference, state) { |
||
1016 | // Remove resize event listener on window |
||
1017 | getWindow(reference).removeEventListener('resize', state.updateBound); |
||
1018 | |||
1019 | // Remove scroll event listener on scroll parents |
||
1020 | state.scrollParents.forEach(function (target) { |
||
1021 | target.removeEventListener('scroll', state.updateBound); |
||
1022 | }); |
||
1023 | |||
1024 | // Reset state |
||
1025 | state.updateBound = null; |
||
1026 | state.scrollParents = []; |
||
1027 | state.scrollElement = null; |
||
1028 | state.eventsEnabled = false; |
||
1029 | return state; |
||
1030 | } |
||
1031 | |||
1032 | /** |
||
1033 | * It will remove resize/scroll events and won't recalculate popper position |
||
1034 | * when they are triggered. It also won't trigger onUpdate callback anymore, |
||
1035 | * unless you call `update` method manually. |
||
1036 | * @method |
||
1037 | * @memberof Popper |
||
1038 | */ |
||
1039 | function disableEventListeners() { |
||
1040 | if (this.state.eventsEnabled) { |
||
1041 | cancelAnimationFrame(this.scheduleUpdate); |
||
1042 | this.state = removeEventListeners(this.reference, this.state); |
||
1043 | } |
||
1044 | } |
||
1045 | |||
1046 | /** |
||
1047 | * Tells if a given input is a number |
||
1048 | * @method |
||
1049 | * @memberof Popper.Utils |
||
1050 | * @param {*} input to check |
||
1051 | * @return {Boolean} |
||
1052 | */ |
||
1053 | function isNumeric(n) { |
||
1054 | return n !== '' && !isNaN(parseFloat(n)) && isFinite(n); |
||
1055 | } |
||
1056 | |||
1057 | /** |
||
1058 | * Set the style to the given popper |
||
1059 | * @method |
||
1060 | * @memberof Popper.Utils |
||
1061 | * @argument {Element} element - Element to apply the style to |
||
1062 | * @argument {Object} styles |
||
1063 | * Object with a list of properties and values which will be applied to the element |
||
1064 | */ |
||
1065 | function setStyles(element, styles) { |
||
1066 | Object.keys(styles).forEach(function (prop) { |
||
1067 | var unit = ''; |
||
1068 | // add unit if the value is numeric and is one of the following |
||
1069 | if (['width', 'height', 'top', 'right', 'bottom', 'left'].indexOf(prop) !== -1 && isNumeric(styles[prop])) { |
||
1070 | unit = 'px'; |
||
1071 | } |
||
1072 | element.style[prop] = styles[prop] + unit; |
||
1073 | }); |
||
1074 | } |
||
1075 | |||
1076 | /** |
||
1077 | * Set the attributes to the given popper |
||
1078 | * @method |
||
1079 | * @memberof Popper.Utils |
||
1080 | * @argument {Element} element - Element to apply the attributes to |
||
1081 | * @argument {Object} styles |
||
1082 | * Object with a list of properties and values which will be applied to the element |
||
1083 | */ |
||
1084 | function setAttributes(element, attributes) { |
||
1085 | Object.keys(attributes).forEach(function (prop) { |
||
1086 | var value = attributes[prop]; |
||
1087 | if (value !== false) { |
||
1088 | element.setAttribute(prop, attributes[prop]); |
||
1089 | } else { |
||
1090 | element.removeAttribute(prop); |
||
1091 | } |
||
1092 | }); |
||
1093 | } |
||
1094 | |||
1095 | /** |
||
1096 | * @function |
||
1097 | * @memberof Modifiers |
||
1098 | * @argument {Object} data - The data object generated by `update` method |
||
1099 | * @argument {Object} data.styles - List of style properties - values to apply to popper element |
||
1100 | * @argument {Object} data.attributes - List of attribute properties - values to apply to popper element |
||
1101 | * @argument {Object} options - Modifiers configuration and options |
||
1102 | * @returns {Object} The same data object |
||
1103 | */ |
||
1104 | function applyStyle(data) { |
||
1105 | // any property present in `data.styles` will be applied to the popper, |
||
1106 | // in this way we can make the 3rd party modifiers add custom styles to it |
||
1107 | // Be aware, modifiers could override the properties defined in the previous |
||
1108 | // lines of this modifier! |
||
1109 | setStyles(data.instance.popper, data.styles); |
||
1110 | |||
1111 | // any property present in `data.attributes` will be applied to the popper, |
||
1112 | // they will be set as HTML attributes of the element |
||
1113 | setAttributes(data.instance.popper, data.attributes); |
||
1114 | |||
1115 | // if arrowElement is defined and arrowStyles has some properties |
||
1116 | if (data.arrowElement && Object.keys(data.arrowStyles).length) { |
||
1117 | setStyles(data.arrowElement, data.arrowStyles); |
||
1118 | } |
||
1119 | |||
1120 | return data; |
||
1121 | } |
||
1122 | |||
1123 | /** |
||
1124 | * Set the x-placement attribute before everything else because it could be used |
||
1125 | * to add margins to the popper margins needs to be calculated to get the |
||
1126 | * correct popper offsets. |
||
1127 | * @method |
||
1128 | * @memberof Popper.modifiers |
||
1129 | * @param {HTMLElement} reference - The reference element used to position the popper |
||
1130 | * @param {HTMLElement} popper - The HTML element used as popper. |
||
1131 | * @param {Object} options - Popper.js options |
||
1132 | */ |
||
1133 | function applyStyleOnLoad(reference, popper, options, modifierOptions, state) { |
||
1134 | // compute reference element offsets |
||
1135 | var referenceOffsets = getReferenceOffsets(state, popper, reference); |
||
1136 | |||
1137 | // compute auto placement, store placement inside the data object, |
||
1138 | // modifiers will be able to edit `placement` if needed |
||
1139 | // and refer to originalPlacement to know the original value |
||
1140 | var placement = computeAutoPlacement(options.placement, referenceOffsets, popper, reference, options.modifiers.flip.boundariesElement, options.modifiers.flip.padding); |
||
1141 | |||
1142 | popper.setAttribute('x-placement', placement); |
||
1143 | |||
1144 | // Apply `position` to popper before anything else because |
||
1145 | // without the position applied we can't guarantee correct computations |
||
1146 | setStyles(popper, { position: 'absolute' }); |
||
1147 | |||
1148 | return options; |
||
1149 | } |
||
1150 | |||
1151 | /** |
||
1152 | * @function |
||
1153 | * @memberof Modifiers |
||
1154 | * @argument {Object} data - The data object generated by `update` method |
||
1155 | * @argument {Object} options - Modifiers configuration and options |
||
1156 | * @returns {Object} The data object, properly modified |
||
1157 | */ |
||
1158 | function computeStyle(data, options) { |
||
1159 | var x = options.x, |
||
1160 | y = options.y; |
||
1161 | var popper = data.offsets.popper; |
||
1162 | |||
1163 | // Remove this legacy support in Popper.js v2 |
||
1164 | |||
1165 | var legacyGpuAccelerationOption = find(data.instance.modifiers, function (modifier) { |
||
1166 | return modifier.name === 'applyStyle'; |
||
1167 | }).gpuAcceleration; |
||
1168 | if (legacyGpuAccelerationOption !== undefined) { |
||
1169 | console.warn('WARNING: `gpuAcceleration` option moved to `computeStyle` modifier and will not be supported in future versions of Popper.js!'); |
||
1170 | } |
||
1171 | var gpuAcceleration = legacyGpuAccelerationOption !== undefined ? legacyGpuAccelerationOption : options.gpuAcceleration; |
||
1172 | |||
1173 | var offsetParent = getOffsetParent(data.instance.popper); |
||
1174 | var offsetParentRect = getBoundingClientRect(offsetParent); |
||
1175 | |||
1176 | // Styles |
||
1177 | var styles = { |
||
1178 | position: popper.position |
||
1179 | }; |
||
1180 | |||
1181 | // floor sides to avoid blurry text |
||
1182 | var offsets = { |
||
1183 | left: Math.floor(popper.left), |
||
1184 | top: Math.floor(popper.top), |
||
1185 | bottom: Math.floor(popper.bottom), |
||
1186 | right: Math.floor(popper.right) |
||
1187 | }; |
||
1188 | |||
1189 | var sideA = x === 'bottom' ? 'top' : 'bottom'; |
||
1190 | var sideB = y === 'right' ? 'left' : 'right'; |
||
1191 | |||
1192 | // if gpuAcceleration is set to `true` and transform is supported, |
||
1193 | // we use `translate3d` to apply the position to the popper we |
||
1194 | // automatically use the supported prefixed version if needed |
||
1195 | var prefixedProperty = getSupportedPropertyName('transform'); |
||
1196 | |||
1197 | // now, let's make a step back and look at this code closely (wtf?) |
||
1198 | // If the content of the popper grows once it's been positioned, it |
||
1199 | // may happen that the popper gets misplaced because of the new content |
||
1200 | // overflowing its reference element |
||
1201 | // To avoid this problem, we provide two options (x and y), which allow |
||
1202 | // the consumer to define the offset origin. |
||
1203 | // If we position a popper on top of a reference element, we can set |
||
1204 | // `x` to `top` to make the popper grow towards its top instead of |
||
1205 | // its bottom. |
||
1206 | var left = void 0, |
||
1207 | top = void 0; |
||
1208 | if (sideA === 'bottom') { |
||
1209 | top = -offsetParentRect.height + offsets.bottom; |
||
1210 | } else { |
||
1211 | top = offsets.top; |
||
1212 | } |
||
1213 | if (sideB === 'right') { |
||
1214 | left = -offsetParentRect.width + offsets.right; |
||
1215 | } else { |
||
1216 | left = offsets.left; |
||
1217 | } |
||
1218 | if (gpuAcceleration && prefixedProperty) { |
||
1219 | styles[prefixedProperty] = 'translate3d(' + left + 'px, ' + top + 'px, 0)'; |
||
1220 | styles[sideA] = 0; |
||
1221 | styles[sideB] = 0; |
||
1222 | styles.willChange = 'transform'; |
||
1223 | } else { |
||
1224 | // othwerise, we use the standard `top`, `left`, `bottom` and `right` properties |
||
1225 | var invertTop = sideA === 'bottom' ? -1 : 1; |
||
1226 | var invertLeft = sideB === 'right' ? -1 : 1; |
||
1227 | styles[sideA] = top * invertTop; |
||
1228 | styles[sideB] = left * invertLeft; |
||
1229 | styles.willChange = sideA + ', ' + sideB; |
||
1230 | } |
||
1231 | |||
1232 | // Attributes |
||
1233 | var attributes = { |
||
1234 | 'x-placement': data.placement |
||
1235 | }; |
||
1236 | |||
1237 | // Update `data` attributes, styles and arrowStyles |
||
1238 | data.attributes = _extends({}, attributes, data.attributes); |
||
1239 | data.styles = _extends({}, styles, data.styles); |
||
1240 | data.arrowStyles = _extends({}, data.offsets.arrow, data.arrowStyles); |
||
1241 | |||
1242 | return data; |
||
1243 | } |
||
1244 | |||
1245 | /** |
||
1246 | * Helper used to know if the given modifier depends from another one.<br /> |
||
1247 | * It checks if the needed modifier is listed and enabled. |
||
1248 | * @method |
||
1249 | * @memberof Popper.Utils |
||
1250 | * @param {Array} modifiers - list of modifiers |
||
1251 | * @param {String} requestingName - name of requesting modifier |
||
1252 | * @param {String} requestedName - name of requested modifier |
||
1253 | * @returns {Boolean} |
||
1254 | */ |
||
1255 | function isModifierRequired(modifiers, requestingName, requestedName) { |
||
1256 | var requesting = find(modifiers, function (_ref) { |
||
1257 | var name = _ref.name; |
||
1258 | return name === requestingName; |
||
1259 | }); |
||
1260 | |||
1261 | var isRequired = !!requesting && modifiers.some(function (modifier) { |
||
1262 | return modifier.name === requestedName && modifier.enabled && modifier.order < requesting.order; |
||
1263 | }); |
||
1264 | |||
1265 | if (!isRequired) { |
||
1266 | var _requesting = '`' + requestingName + '`'; |
||
1267 | var requested = '`' + requestedName + '`'; |
||
1268 | console.warn(requested + ' modifier is required by ' + _requesting + ' modifier in order to work, be sure to include it before ' + _requesting + '!'); |
||
1269 | } |
||
1270 | return isRequired; |
||
1271 | } |
||
1272 | |||
1273 | /** |
||
1274 | * @function |
||
1275 | * @memberof Modifiers |
||
1276 | * @argument {Object} data - The data object generated by update method |
||
1277 | * @argument {Object} options - Modifiers configuration and options |
||
1278 | * @returns {Object} The data object, properly modified |
||
1279 | */ |
||
1280 | function arrow(data, options) { |
||
1281 | var _data$offsets$arrow; |
||
1282 | |||
1283 | // arrow depends on keepTogether in order to work |
||
1284 | if (!isModifierRequired(data.instance.modifiers, 'arrow', 'keepTogether')) { |
||
1285 | return data; |
||
1286 | } |
||
1287 | |||
1288 | var arrowElement = options.element; |
||
1289 | |||
1290 | // if arrowElement is a string, suppose it's a CSS selector |
||
1291 | if (typeof arrowElement === 'string') { |
||
1292 | arrowElement = data.instance.popper.querySelector(arrowElement); |
||
1293 | |||
1294 | // if arrowElement is not found, don't run the modifier |
||
1295 | if (!arrowElement) { |
||
1296 | return data; |
||
1297 | } |
||
1298 | } else { |
||
1299 | // if the arrowElement isn't a query selector we must check that the |
||
1300 | // provided DOM node is child of its popper node |
||
1301 | if (!data.instance.popper.contains(arrowElement)) { |
||
1302 | console.warn('WARNING: `arrow.element` must be child of its popper element!'); |
||
1303 | return data; |
||
1304 | } |
||
1305 | } |
||
1306 | |||
1307 | var placement = data.placement.split('-')[0]; |
||
1308 | var _data$offsets = data.offsets, |
||
1309 | popper = _data$offsets.popper, |
||
1310 | reference = _data$offsets.reference; |
||
1311 | |||
1312 | var isVertical = ['left', 'right'].indexOf(placement) !== -1; |
||
1313 | |||
1314 | var len = isVertical ? 'height' : 'width'; |
||
1315 | var sideCapitalized = isVertical ? 'Top' : 'Left'; |
||
1316 | var side = sideCapitalized.toLowerCase(); |
||
1317 | var altSide = isVertical ? 'left' : 'top'; |
||
1318 | var opSide = isVertical ? 'bottom' : 'right'; |
||
1319 | var arrowElementSize = getOuterSizes(arrowElement)[len]; |
||
1320 | |||
1321 | // |
||
1322 | // extends keepTogether behavior making sure the popper and its |
||
1323 | // reference have enough pixels in conjuction |
||
1324 | // |
||
1325 | |||
1326 | // top/left side |
||
1327 | if (reference[opSide] - arrowElementSize < popper[side]) { |
||
1328 | data.offsets.popper[side] -= popper[side] - (reference[opSide] - arrowElementSize); |
||
1329 | } |
||
1330 | // bottom/right side |
||
1331 | if (reference[side] + arrowElementSize > popper[opSide]) { |
||
1332 | data.offsets.popper[side] += reference[side] + arrowElementSize - popper[opSide]; |
||
1333 | } |
||
1334 | data.offsets.popper = getClientRect(data.offsets.popper); |
||
1335 | |||
1336 | // compute center of the popper |
||
1337 | var center = reference[side] + reference[len] / 2 - arrowElementSize / 2; |
||
1338 | |||
1339 | // Compute the sideValue using the updated popper offsets |
||
1340 | // take popper margin in account because we don't have this info available |
||
1341 | var css = getStyleComputedProperty(data.instance.popper); |
||
1342 | var popperMarginSide = parseFloat(css['margin' + sideCapitalized], 10); |
||
1343 | var popperBorderSide = parseFloat(css['border' + sideCapitalized + 'Width'], 10); |
||
1344 | var sideValue = center - data.offsets.popper[side] - popperMarginSide - popperBorderSide; |
||
1345 | |||
1346 | // prevent arrowElement from being placed not contiguously to its popper |
||
1347 | sideValue = Math.max(Math.min(popper[len] - arrowElementSize, sideValue), 0); |
||
1348 | |||
1349 | data.arrowElement = arrowElement; |
||
1350 | data.offsets.arrow = (_data$offsets$arrow = {}, defineProperty(_data$offsets$arrow, side, Math.round(sideValue)), defineProperty(_data$offsets$arrow, altSide, ''), _data$offsets$arrow); |
||
1351 | |||
1352 | return data; |
||
1353 | } |
||
1354 | |||
1355 | /** |
||
1356 | * Get the opposite placement variation of the given one |
||
1357 | * @method |
||
1358 | * @memberof Popper.Utils |
||
1359 | * @argument {String} placement variation |
||
1360 | * @returns {String} flipped placement variation |
||
1361 | */ |
||
1362 | function getOppositeVariation(variation) { |
||
1363 | if (variation === 'end') { |
||
1364 | return 'start'; |
||
1365 | } else if (variation === 'start') { |
||
1366 | return 'end'; |
||
1367 | } |
||
1368 | return variation; |
||
1369 | } |
||
1370 | |||
1371 | /** |
||
1372 | * List of accepted placements to use as values of the `placement` option.<br /> |
||
1373 | * Valid placements are: |
||
1374 | * - `auto` |
||
1375 | * - `top` |
||
1376 | * - `right` |
||
1377 | * - `bottom` |
||
1378 | * - `left` |
||
1379 | * |
||
1380 | * Each placement can have a variation from this list: |
||
1381 | * - `-start` |
||
1382 | * - `-end` |
||
1383 | * |
||
1384 | * Variations are interpreted easily if you think of them as the left to right |
||
1385 | * written languages. Horizontally (`top` and `bottom`), `start` is left and `end` |
||
1386 | * is right.<br /> |
||
1387 | * Vertically (`left` and `right`), `start` is top and `end` is bottom. |
||
1388 | * |
||
1389 | * Some valid examples are: |
||
1390 | * - `top-end` (on top of reference, right aligned) |
||
1391 | * - `right-start` (on right of reference, top aligned) |
||
1392 | * - `bottom` (on bottom, centered) |
||
1393 | * - `auto-right` (on the side with more space available, alignment depends by placement) |
||
1394 | * |
||
1395 | * @static |
||
1396 | * @type {Array} |
||
1397 | * @enum {String} |
||
1398 | * @readonly |
||
1399 | * @method placements |
||
1400 | * @memberof Popper |
||
1401 | */ |
||
1402 | var placements = ['auto-start', 'auto', 'auto-end', 'top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start']; |
||
1403 | |||
1404 | // Get rid of `auto` `auto-start` and `auto-end` |
||
1405 | var validPlacements = placements.slice(3); |
||
1406 | |||
1407 | /** |
||
1408 | * Given an initial placement, returns all the subsequent placements |
||
1409 | * clockwise (or counter-clockwise). |
||
1410 | * |
||
1411 | * @method |
||
1412 | * @memberof Popper.Utils |
||
1413 | * @argument {String} placement - A valid placement (it accepts variations) |
||
1414 | * @argument {Boolean} counter - Set to true to walk the placements counterclockwise |
||
1415 | * @returns {Array} placements including their variations |
||
1416 | */ |
||
1417 | function clockwise(placement) { |
||
1418 | var counter = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; |
||
1419 | |||
1420 | var index = validPlacements.indexOf(placement); |
||
1421 | var arr = validPlacements.slice(index + 1).concat(validPlacements.slice(0, index)); |
||
1422 | return counter ? arr.reverse() : arr; |
||
1423 | } |
||
1424 | |||
1425 | var BEHAVIORS = { |
||
1426 | FLIP: 'flip', |
||
1427 | CLOCKWISE: 'clockwise', |
||
1428 | COUNTERCLOCKWISE: 'counterclockwise' |
||
1429 | }; |
||
1430 | |||
1431 | /** |
||
1432 | * @function |
||
1433 | * @memberof Modifiers |
||
1434 | * @argument {Object} data - The data object generated by update method |
||
1435 | * @argument {Object} options - Modifiers configuration and options |
||
1436 | * @returns {Object} The data object, properly modified |
||
1437 | */ |
||
1438 | function flip(data, options) { |
||
1439 | // if `inner` modifier is enabled, we can't use the `flip` modifier |
||
1440 | if (isModifierEnabled(data.instance.modifiers, 'inner')) { |
||
1441 | return data; |
||
1442 | } |
||
1443 | |||
1444 | if (data.flipped && data.placement === data.originalPlacement) { |
||
1445 | // seems like flip is trying to loop, probably there's not enough space on any of the flippable sides |
||
1446 | return data; |
||
1447 | } |
||
1448 | |||
1449 | var boundaries = getBoundaries(data.instance.popper, data.instance.reference, options.padding, options.boundariesElement); |
||
1450 | |||
1451 | var placement = data.placement.split('-')[0]; |
||
1452 | var placementOpposite = getOppositePlacement(placement); |
||
1453 | var variation = data.placement.split('-')[1] || ''; |
||
1454 | |||
1455 | var flipOrder = []; |
||
1456 | |||
1457 | switch (options.behavior) { |
||
1458 | case BEHAVIORS.FLIP: |
||
1459 | flipOrder = [placement, placementOpposite]; |
||
1460 | break; |
||
1461 | case BEHAVIORS.CLOCKWISE: |
||
1462 | flipOrder = clockwise(placement); |
||
1463 | break; |
||
1464 | case BEHAVIORS.COUNTERCLOCKWISE: |
||
1465 | flipOrder = clockwise(placement, true); |
||
1466 | break; |
||
1467 | default: |
||
1468 | flipOrder = options.behavior; |
||
1469 | } |
||
1470 | |||
1471 | flipOrder.forEach(function (step, index) { |
||
1472 | if (placement !== step || flipOrder.length === index + 1) { |
||
1473 | return data; |
||
1474 | } |
||
1475 | |||
1476 | placement = data.placement.split('-')[0]; |
||
1477 | placementOpposite = getOppositePlacement(placement); |
||
1478 | |||
1479 | var popperOffsets = data.offsets.popper; |
||
1480 | var refOffsets = data.offsets.reference; |
||
1481 | |||
1482 | // using floor because the reference offsets may contain decimals we are not going to consider here |
||
1483 | var floor = Math.floor; |
||
1484 | var overlapsRef = placement === 'left' && floor(popperOffsets.right) > floor(refOffsets.left) || placement === 'right' && floor(popperOffsets.left) < floor(refOffsets.right) || placement === 'top' && floor(popperOffsets.bottom) > floor(refOffsets.top) || placement === 'bottom' && floor(popperOffsets.top) < floor(refOffsets.bottom); |
||
1485 | |||
1486 | var overflowsLeft = floor(popperOffsets.left) < floor(boundaries.left); |
||
1487 | var overflowsRight = floor(popperOffsets.right) > floor(boundaries.right); |
||
1488 | var overflowsTop = floor(popperOffsets.top) < floor(boundaries.top); |
||
1489 | var overflowsBottom = floor(popperOffsets.bottom) > floor(boundaries.bottom); |
||
1490 | |||
1491 | var overflowsBoundaries = placement === 'left' && overflowsLeft || placement === 'right' && overflowsRight || placement === 'top' && overflowsTop || placement === 'bottom' && overflowsBottom; |
||
1492 | |||
1493 | // flip the variation if required |
||
1494 | var isVertical = ['top', 'bottom'].indexOf(placement) !== -1; |
||
1495 | var flippedVariation = !!options.flipVariations && (isVertical && variation === 'start' && overflowsLeft || isVertical && variation === 'end' && overflowsRight || !isVertical && variation === 'start' && overflowsTop || !isVertical && variation === 'end' && overflowsBottom); |
||
1496 | |||
1497 | if (overlapsRef || overflowsBoundaries || flippedVariation) { |
||
1498 | // this boolean to detect any flip loop |
||
1499 | data.flipped = true; |
||
1500 | |||
1501 | if (overlapsRef || overflowsBoundaries) { |
||
1502 | placement = flipOrder[index + 1]; |
||
1503 | } |
||
1504 | |||
1505 | if (flippedVariation) { |
||
1506 | variation = getOppositeVariation(variation); |
||
1507 | } |
||
1508 | |||
1509 | data.placement = placement + (variation ? '-' + variation : ''); |
||
1510 | |||
1511 | // this object contains `position`, we want to preserve it along with |
||
1512 | // any additional property we may add in the future |
||
1513 | data.offsets.popper = _extends({}, data.offsets.popper, getPopperOffsets(data.instance.popper, data.offsets.reference, data.placement)); |
||
1514 | |||
1515 | data = runModifiers(data.instance.modifiers, data, 'flip'); |
||
1516 | } |
||
1517 | }); |
||
1518 | return data; |
||
1519 | } |
||
1520 | |||
1521 | /** |
||
1522 | * @function |
||
1523 | * @memberof Modifiers |
||
1524 | * @argument {Object} data - The data object generated by update method |
||
1525 | * @argument {Object} options - Modifiers configuration and options |
||
1526 | * @returns {Object} The data object, properly modified |
||
1527 | */ |
||
1528 | function keepTogether(data) { |
||
1529 | var _data$offsets = data.offsets, |
||
1530 | popper = _data$offsets.popper, |
||
1531 | reference = _data$offsets.reference; |
||
1532 | |||
1533 | var placement = data.placement.split('-')[0]; |
||
1534 | var floor = Math.floor; |
||
1535 | var isVertical = ['top', 'bottom'].indexOf(placement) !== -1; |
||
1536 | var side = isVertical ? 'right' : 'bottom'; |
||
1537 | var opSide = isVertical ? 'left' : 'top'; |
||
1538 | var measurement = isVertical ? 'width' : 'height'; |
||
1539 | |||
1540 | if (popper[side] < floor(reference[opSide])) { |
||
1541 | data.offsets.popper[opSide] = floor(reference[opSide]) - popper[measurement]; |
||
1542 | } |
||
1543 | if (popper[opSide] > floor(reference[side])) { |
||
1544 | data.offsets.popper[opSide] = floor(reference[side]); |
||
1545 | } |
||
1546 | |||
1547 | return data; |
||
1548 | } |
||
1549 | |||
1550 | /** |
||
1551 | * Converts a string containing value + unit into a px value number |
||
1552 | * @function |
||
1553 | * @memberof {modifiers~offset} |
||
1554 | * @private |
||
1555 | * @argument {String} str - Value + unit string |
||
1556 | * @argument {String} measurement - `height` or `width` |
||
1557 | * @argument {Object} popperOffsets |
||
1558 | * @argument {Object} referenceOffsets |
||
1559 | * @returns {Number|String} |
||
1560 | * Value in pixels, or original string if no values were extracted |
||
1561 | */ |
||
1562 | function toValue(str, measurement, popperOffsets, referenceOffsets) { |
||
1563 | // separate value from unit |
||
1564 | var split = str.match(/((?:\-|\+)?\d*\.?\d*)(.*)/); |
||
1565 | var value = +split[1]; |
||
1566 | var unit = split[2]; |
||
1567 | |||
1568 | // If it's not a number it's an operator, I guess |
||
1569 | if (!value) { |
||
1570 | return str; |
||
1571 | } |
||
1572 | |||
1573 | if (unit.indexOf('%') === 0) { |
||
1574 | var element = void 0; |
||
1575 | switch (unit) { |
||
1576 | case '%p': |
||
1577 | element = popperOffsets; |
||
1578 | break; |
||
1579 | case '%': |
||
1580 | case '%r': |
||
1581 | default: |
||
1582 | element = referenceOffsets; |
||
1583 | } |
||
1584 | |||
1585 | var rect = getClientRect(element); |
||
1586 | return rect[measurement] / 100 * value; |
||
1587 | } else if (unit === 'vh' || unit === 'vw') { |
||
1588 | // if is a vh or vw, we calculate the size based on the viewport |
||
1589 | var size = void 0; |
||
1590 | if (unit === 'vh') { |
||
1591 | size = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); |
||
1592 | } else { |
||
1593 | size = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); |
||
1594 | } |
||
1595 | return size / 100 * value; |
||
1596 | } else { |
||
1597 | // if is an explicit pixel unit, we get rid of the unit and keep the value |
||
1598 | // if is an implicit unit, it's px, and we return just the value |
||
1599 | return value; |
||
1600 | } |
||
1601 | } |
||
1602 | |||
1603 | /** |
||
1604 | * Parse an `offset` string to extrapolate `x` and `y` numeric offsets. |
||
1605 | * @function |
||
1606 | * @memberof {modifiers~offset} |
||
1607 | * @private |
||
1608 | * @argument {String} offset |
||
1609 | * @argument {Object} popperOffsets |
||
1610 | * @argument {Object} referenceOffsets |
||
1611 | * @argument {String} basePlacement |
||
1612 | * @returns {Array} a two cells array with x and y offsets in numbers |
||
1613 | */ |
||
1614 | function parseOffset(offset, popperOffsets, referenceOffsets, basePlacement) { |
||
1615 | var offsets = [0, 0]; |
||
1616 | |||
1617 | // Use height if placement is left or right and index is 0 otherwise use width |
||
1618 | // in this way the first offset will use an axis and the second one |
||
1619 | // will use the other one |
||
1620 | var useHeight = ['right', 'left'].indexOf(basePlacement) !== -1; |
||
1621 | |||
1622 | // Split the offset string to obtain a list of values and operands |
||
1623 | // The regex addresses values with the plus or minus sign in front (+10, -20, etc) |
||
1624 | var fragments = offset.split(/(\+|\-)/).map(function (frag) { |
||
1625 | return frag.trim(); |
||
1626 | }); |
||
1627 | |||
1628 | // Detect if the offset string contains a pair of values or a single one |
||
1629 | // they could be separated by comma or space |
||
1630 | var divider = fragments.indexOf(find(fragments, function (frag) { |
||
1631 | return frag.search(/,|\s/) !== -1; |
||
1632 | })); |
||
1633 | |||
1634 | if (fragments[divider] && fragments[divider].indexOf(',') === -1) { |
||
1635 | console.warn('Offsets separated by white space(s) are deprecated, use a comma (,) instead.'); |
||
1636 | } |
||
1637 | |||
1638 | // If divider is found, we divide the list of values and operands to divide |
||
1639 | // them by ofset X and Y. |
||
1640 | var splitRegex = /\s*,\s*|\s+/; |
||
1641 | var ops = divider !== -1 ? [fragments.slice(0, divider).concat([fragments[divider].split(splitRegex)[0]]), [fragments[divider].split(splitRegex)[1]].concat(fragments.slice(divider + 1))] : [fragments]; |
||
1642 | |||
1643 | // Convert the values with units to absolute pixels to allow our computations |
||
1644 | ops = ops.map(function (op, index) { |
||
1645 | // Most of the units rely on the orientation of the popper |
||
1646 | var measurement = (index === 1 ? !useHeight : useHeight) ? 'height' : 'width'; |
||
1647 | var mergeWithPrevious = false; |
||
1648 | return op |
||
1649 | // This aggregates any `+` or `-` sign that aren't considered operators |
||
1650 | // e.g.: 10 + +5 => [10, +, +5] |
||
1651 | .reduce(function (a, b) { |
||
1652 | if (a[a.length - 1] === '' && ['+', '-'].indexOf(b) !== -1) { |
||
1653 | a[a.length - 1] = b; |
||
1654 | mergeWithPrevious = true; |
||
1655 | return a; |
||
1656 | } else if (mergeWithPrevious) { |
||
1657 | a[a.length - 1] += b; |
||
1658 | mergeWithPrevious = false; |
||
1659 | return a; |
||
1660 | } else { |
||
1661 | return a.concat(b); |
||
1662 | } |
||
1663 | }, []) |
||
1664 | // Here we convert the string values into number values (in px) |
||
1665 | .map(function (str) { |
||
1666 | return toValue(str, measurement, popperOffsets, referenceOffsets); |
||
1667 | }); |
||
1668 | }); |
||
1669 | |||
1670 | // Loop trough the offsets arrays and execute the operations |
||
1671 | ops.forEach(function (op, index) { |
||
1672 | op.forEach(function (frag, index2) { |
||
1673 | if (isNumeric(frag)) { |
||
1674 | offsets[index] += frag * (op[index2 - 1] === '-' ? -1 : 1); |
||
1675 | } |
||
1676 | }); |
||
1677 | }); |
||
1678 | return offsets; |
||
1679 | } |
||
1680 | |||
1681 | /** |
||
1682 | * @function |
||
1683 | * @memberof Modifiers |
||
1684 | * @argument {Object} data - The data object generated by update method |
||
1685 | * @argument {Object} options - Modifiers configuration and options |
||
1686 | * @argument {Number|String} options.offset=0 |
||
1687 | * The offset value as described in the modifier description |
||
1688 | * @returns {Object} The data object, properly modified |
||
1689 | */ |
||
1690 | function offset(data, _ref) { |
||
1691 | var offset = _ref.offset; |
||
1692 | var placement = data.placement, |
||
1693 | _data$offsets = data.offsets, |
||
1694 | popper = _data$offsets.popper, |
||
1695 | reference = _data$offsets.reference; |
||
1696 | |||
1697 | var basePlacement = placement.split('-')[0]; |
||
1698 | |||
1699 | var offsets = void 0; |
||
1700 | if (isNumeric(+offset)) { |
||
1701 | offsets = [+offset, 0]; |
||
1702 | } else { |
||
1703 | offsets = parseOffset(offset, popper, reference, basePlacement); |
||
1704 | } |
||
1705 | |||
1706 | if (basePlacement === 'left') { |
||
1707 | popper.top += offsets[0]; |
||
1708 | popper.left -= offsets[1]; |
||
1709 | } else if (basePlacement === 'right') { |
||
1710 | popper.top += offsets[0]; |
||
1711 | popper.left += offsets[1]; |
||
1712 | } else if (basePlacement === 'top') { |
||
1713 | popper.left += offsets[0]; |
||
1714 | popper.top -= offsets[1]; |
||
1715 | } else if (basePlacement === 'bottom') { |
||
1716 | popper.left += offsets[0]; |
||
1717 | popper.top += offsets[1]; |
||
1718 | } |
||
1719 | |||
1720 | data.popper = popper; |
||
1721 | return data; |
||
1722 | } |
||
1723 | |||
1724 | /** |
||
1725 | * @function |
||
1726 | * @memberof Modifiers |
||
1727 | * @argument {Object} data - The data object generated by `update` method |
||
1728 | * @argument {Object} options - Modifiers configuration and options |
||
1729 | * @returns {Object} The data object, properly modified |
||
1730 | */ |
||
1731 | function preventOverflow(data, options) { |
||
1732 | var boundariesElement = options.boundariesElement || getOffsetParent(data.instance.popper); |
||
1733 | |||
1734 | // If offsetParent is the reference element, we really want to |
||
1735 | // go one step up and use the next offsetParent as reference to |
||
1736 | // avoid to make this modifier completely useless and look like broken |
||
1737 | if (data.instance.reference === boundariesElement) { |
||
1738 | boundariesElement = getOffsetParent(boundariesElement); |
||
1739 | } |
||
1740 | |||
1741 | var boundaries = getBoundaries(data.instance.popper, data.instance.reference, options.padding, boundariesElement); |
||
1742 | options.boundaries = boundaries; |
||
1743 | |||
1744 | var order = options.priority; |
||
1745 | var popper = data.offsets.popper; |
||
1746 | |||
1747 | var check = { |
||
1748 | primary: function primary(placement) { |
||
1749 | var value = popper[placement]; |
||
1750 | if (popper[placement] < boundaries[placement] && !options.escapeWithReference) { |
||
1751 | value = Math.max(popper[placement], boundaries[placement]); |
||
1752 | } |
||
1753 | return defineProperty({}, placement, value); |
||
1754 | }, |
||
1755 | secondary: function secondary(placement) { |
||
1756 | var mainSide = placement === 'right' ? 'left' : 'top'; |
||
1757 | var value = popper[mainSide]; |
||
1758 | if (popper[placement] > boundaries[placement] && !options.escapeWithReference) { |
||
1759 | value = Math.min(popper[mainSide], boundaries[placement] - (placement === 'right' ? popper.width : popper.height)); |
||
1760 | } |
||
1761 | return defineProperty({}, mainSide, value); |
||
1762 | } |
||
1763 | }; |
||
1764 | |||
1765 | order.forEach(function (placement) { |
||
1766 | var side = ['left', 'top'].indexOf(placement) !== -1 ? 'primary' : 'secondary'; |
||
1767 | popper = _extends({}, popper, check[side](placement)); |
||
1768 | }); |
||
1769 | |||
1770 | data.offsets.popper = popper; |
||
1771 | |||
1772 | return data; |
||
1773 | } |
||
1774 | |||
1775 | /** |
||
1776 | * @function |
||
1777 | * @memberof Modifiers |
||
1778 | * @argument {Object} data - The data object generated by `update` method |
||
1779 | * @argument {Object} options - Modifiers configuration and options |
||
1780 | * @returns {Object} The data object, properly modified |
||
1781 | */ |
||
1782 | function shift(data) { |
||
1783 | var placement = data.placement; |
||
1784 | var basePlacement = placement.split('-')[0]; |
||
1785 | var shiftvariation = placement.split('-')[1]; |
||
1786 | |||
1787 | // if shift shiftvariation is specified, run the modifier |
||
1788 | if (shiftvariation) { |
||
1789 | var _data$offsets = data.offsets, |
||
1790 | reference = _data$offsets.reference, |
||
1791 | popper = _data$offsets.popper; |
||
1792 | |||
1793 | var isVertical = ['bottom', 'top'].indexOf(basePlacement) !== -1; |
||
1794 | var side = isVertical ? 'left' : 'top'; |
||
1795 | var measurement = isVertical ? 'width' : 'height'; |
||
1796 | |||
1797 | var shiftOffsets = { |
||
1798 | start: defineProperty({}, side, reference[side]), |
||
1799 | end: defineProperty({}, side, reference[side] + reference[measurement] - popper[measurement]) |
||
1800 | }; |
||
1801 | |||
1802 | data.offsets.popper = _extends({}, popper, shiftOffsets[shiftvariation]); |
||
1803 | } |
||
1804 | |||
1805 | return data; |
||
1806 | } |
||
1807 | |||
1808 | /** |
||
1809 | * @function |
||
1810 | * @memberof Modifiers |
||
1811 | * @argument {Object} data - The data object generated by update method |
||
1812 | * @argument {Object} options - Modifiers configuration and options |
||
1813 | * @returns {Object} The data object, properly modified |
||
1814 | */ |
||
1815 | function hide(data) { |
||
1816 | if (!isModifierRequired(data.instance.modifiers, 'hide', 'preventOverflow')) { |
||
1817 | return data; |
||
1818 | } |
||
1819 | |||
1820 | var refRect = data.offsets.reference; |
||
1821 | var bound = find(data.instance.modifiers, function (modifier) { |
||
1822 | return modifier.name === 'preventOverflow'; |
||
1823 | }).boundaries; |
||
1824 | |||
1825 | if (refRect.bottom < bound.top || refRect.left > bound.right || refRect.top > bound.bottom || refRect.right < bound.left) { |
||
1826 | // Avoid unnecessary DOM access if visibility hasn't changed |
||
1827 | if (data.hide === true) { |
||
1828 | return data; |
||
1829 | } |
||
1830 | |||
1831 | data.hide = true; |
||
1832 | data.attributes['x-out-of-boundaries'] = ''; |
||
1833 | } else { |
||
1834 | // Avoid unnecessary DOM access if visibility hasn't changed |
||
1835 | if (data.hide === false) { |
||
1836 | return data; |
||
1837 | } |
||
1838 | |||
1839 | data.hide = false; |
||
1840 | data.attributes['x-out-of-boundaries'] = false; |
||
1841 | } |
||
1842 | |||
1843 | return data; |
||
1844 | } |
||
1845 | |||
1846 | /** |
||
1847 | * @function |
||
1848 | * @memberof Modifiers |
||
1849 | * @argument {Object} data - The data object generated by `update` method |
||
1850 | * @argument {Object} options - Modifiers configuration and options |
||
1851 | * @returns {Object} The data object, properly modified |
||
1852 | */ |
||
1853 | function inner(data) { |
||
1854 | var placement = data.placement; |
||
1855 | var basePlacement = placement.split('-')[0]; |
||
1856 | var _data$offsets = data.offsets, |
||
1857 | popper = _data$offsets.popper, |
||
1858 | reference = _data$offsets.reference; |
||
1859 | |||
1860 | var isHoriz = ['left', 'right'].indexOf(basePlacement) !== -1; |
||
1861 | |||
1862 | var subtractLength = ['top', 'left'].indexOf(basePlacement) === -1; |
||
1863 | |||
1864 | popper[isHoriz ? 'left' : 'top'] = reference[basePlacement] - (subtractLength ? popper[isHoriz ? 'width' : 'height'] : 0); |
||
1865 | |||
1866 | data.placement = getOppositePlacement(placement); |
||
1867 | data.offsets.popper = getClientRect(popper); |
||
1868 | |||
1869 | return data; |
||
1870 | } |
||
1871 | |||
1872 | /** |
||
1873 | * Modifier function, each modifier can have a function of this type assigned |
||
1874 | * to its `fn` property.<br /> |
||
1875 | * These functions will be called on each update, this means that you must |
||
1876 | * make sure they are performant enough to avoid performance bottlenecks. |
||
1877 | * |
||
1878 | * @function ModifierFn |
||
1879 | * @argument {dataObject} data - The data object generated by `update` method |
||
1880 | * @argument {Object} options - Modifiers configuration and options |
||
1881 | * @returns {dataObject} The data object, properly modified |
||
1882 | */ |
||
1883 | |||
1884 | /** |
||
1885 | * Modifiers are plugins used to alter the behavior of your poppers.<br /> |
||
1886 | * Popper.js uses a set of 9 modifiers to provide all the basic functionalities |
||
1887 | * needed by the library. |
||
1888 | * |
||
1889 | * Usually you don't want to override the `order`, `fn` and `onLoad` props. |
||
1890 | * All the other properties are configurations that could be tweaked. |
||
1891 | * @namespace modifiers |
||
1892 | */ |
||
1893 | var modifiers = { |
||
1894 | /** |
||
1895 | * Modifier used to shift the popper on the start or end of its reference |
||
1896 | * element.<br /> |
||
1897 | * It will read the variation of the `placement` property.<br /> |
||
1898 | * It can be one either `-end` or `-start`. |
||
1899 | * @memberof modifiers |
||
1900 | * @inner |
||
1901 | */ |
||
1902 | shift: { |
||
1903 | /** @prop {number} order=100 - Index used to define the order of execution */ |
||
1904 | order: 100, |
||
1905 | /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */ |
||
1906 | enabled: true, |
||
1907 | /** @prop {ModifierFn} */ |
||
1908 | fn: shift |
||
1909 | }, |
||
1910 | |||
1911 | /** |
||
1912 | * The `offset` modifier can shift your popper on both its axis. |
||
1913 | * |
||
1914 | * It accepts the following units: |
||
1915 | * - `px` or unitless, interpreted as pixels |
||
1916 | * - `%` or `%r`, percentage relative to the length of the reference element |
||
1917 | * - `%p`, percentage relative to the length of the popper element |
||
1918 | * - `vw`, CSS viewport width unit |
||
1919 | * - `vh`, CSS viewport height unit |
||
1920 | * |
||
1921 | * For length is intended the main axis relative to the placement of the popper.<br /> |
||
1922 | * This means that if the placement is `top` or `bottom`, the length will be the |
||
1923 | * `width`. In case of `left` or `right`, it will be the height. |
||
1924 | * |
||
1925 | * You can provide a single value (as `Number` or `String`), or a pair of values |
||
1926 | * as `String` divided by a comma or one (or more) white spaces.<br /> |
||
1927 | * The latter is a deprecated method because it leads to confusion and will be |
||
1928 | * removed in v2.<br /> |
||
1929 | * Additionally, it accepts additions and subtractions between different units. |
||
1930 | * Note that multiplications and divisions aren't supported. |
||
1931 | * |
||
1932 | * Valid examples are: |
||
1933 | * ``` |
||
1934 | * 10 |
||
1935 | * '10%' |
||
1936 | * '10, 10' |
||
1937 | * '10%, 10' |
||
1938 | * '10 + 10%' |
||
1939 | * '10 - 5vh + 3%' |
||
1940 | * '-10px + 5vh, 5px - 6%' |
||
1941 | * ``` |
||
1942 | * > **NB**: If you desire to apply offsets to your poppers in a way that may make them overlap |
||
1943 | * > with their reference element, unfortunately, you will have to disable the `flip` modifier. |
||
1944 | * > More on this [reading this issue](https://github.com/FezVrasta/popper.js/issues/373) |
||
1945 | * |
||
1946 | * @memberof modifiers |
||
1947 | * @inner |
||
1948 | */ |
||
1949 | offset: { |
||
1950 | /** @prop {number} order=200 - Index used to define the order of execution */ |
||
1951 | order: 200, |
||
1952 | /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */ |
||
1953 | enabled: true, |
||
1954 | /** @prop {ModifierFn} */ |
||
1955 | fn: offset, |
||
1956 | /** @prop {Number|String} offset=0 |
||
1957 | * The offset value as described in the modifier description |
||
1958 | */ |
||
1959 | offset: 0 |
||
1960 | }, |
||
1961 | |||
1962 | /** |
||
1963 | * Modifier used to prevent the popper from being positioned outside the boundary. |
||
1964 | * |
||
1965 | * An scenario exists where the reference itself is not within the boundaries.<br /> |
||
1966 | * We can say it has "escaped the boundaries" — or just "escaped".<br /> |
||
1967 | * In this case we need to decide whether the popper should either: |
||
1968 | * |
||
1969 | * - detach from the reference and remain "trapped" in the boundaries, or |
||
1970 | * - if it should ignore the boundary and "escape with its reference" |
||
1971 | * |
||
1972 | * When `escapeWithReference` is set to`true` and reference is completely |
||
1973 | * outside its boundaries, the popper will overflow (or completely leave) |
||
1974 | * the boundaries in order to remain attached to the edge of the reference. |
||
1975 | * |
||
1976 | * @memberof modifiers |
||
1977 | * @inner |
||
1978 | */ |
||
1979 | preventOverflow: { |
||
1980 | /** @prop {number} order=300 - Index used to define the order of execution */ |
||
1981 | order: 300, |
||
1982 | /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */ |
||
1983 | enabled: true, |
||
1984 | /** @prop {ModifierFn} */ |
||
1985 | fn: preventOverflow, |
||
1986 | /** |
||
1987 | * @prop {Array} [priority=['left','right','top','bottom']] |
||
1988 | * Popper will try to prevent overflow following these priorities by default, |
||
1989 | * then, it could overflow on the left and on top of the `boundariesElement` |
||
1990 | */ |
||
1991 | priority: ['left', 'right', 'top', 'bottom'], |
||
1992 | /** |
||
1993 | * @prop {number} padding=5 |
||
1994 | * Amount of pixel used to define a minimum distance between the boundaries |
||
1995 | * and the popper this makes sure the popper has always a little padding |
||
1996 | * between the edges of its container |
||
1997 | */ |
||
1998 | padding: 5, |
||
1999 | /** |
||
2000 | * @prop {String|HTMLElement} boundariesElement='scrollParent' |
||
2001 | * Boundaries used by the modifier, can be `scrollParent`, `window`, |
||
2002 | * `viewport` or any DOM element. |
||
2003 | */ |
||
2004 | boundariesElement: 'scrollParent' |
||
2005 | }, |
||
2006 | |||
2007 | /** |
||
2008 | * Modifier used to make sure the reference and its popper stay near eachothers |
||
2009 | * without leaving any gap between the two. Expecially useful when the arrow is |
||
2010 | * enabled and you want to assure it to point to its reference element. |
||
2011 | * It cares only about the first axis, you can still have poppers with margin |
||
2012 | * between the popper and its reference element. |
||
2013 | * @memberof modifiers |
||
2014 | * @inner |
||
2015 | */ |
||
2016 | keepTogether: { |
||
2017 | /** @prop {number} order=400 - Index used to define the order of execution */ |
||
2018 | order: 400, |
||
2019 | /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */ |
||
2020 | enabled: true, |
||
2021 | /** @prop {ModifierFn} */ |
||
2022 | fn: keepTogether |
||
2023 | }, |
||
2024 | |||
2025 | /** |
||
2026 | * This modifier is used to move the `arrowElement` of the popper to make |
||
2027 | * sure it is positioned between the reference element and its popper element. |
||
2028 | * It will read the outer size of the `arrowElement` node to detect how many |
||
2029 | * pixels of conjuction are needed. |
||
2030 | * |
||
2031 | * It has no effect if no `arrowElement` is provided. |
||
2032 | * @memberof modifiers |
||
2033 | * @inner |
||
2034 | */ |
||
2035 | arrow: { |
||
2036 | /** @prop {number} order=500 - Index used to define the order of execution */ |
||
2037 | order: 500, |
||
2038 | /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */ |
||
2039 | enabled: true, |
||
2040 | /** @prop {ModifierFn} */ |
||
2041 | fn: arrow, |
||
2042 | /** @prop {String|HTMLElement} element='[x-arrow]' - Selector or node used as arrow */ |
||
2043 | element: '[x-arrow]' |
||
2044 | }, |
||
2045 | |||
2046 | /** |
||
2047 | * Modifier used to flip the popper's placement when it starts to overlap its |
||
2048 | * reference element. |
||
2049 | * |
||
2050 | * Requires the `preventOverflow` modifier before it in order to work. |
||
2051 | * |
||
2052 | * **NOTE:** this modifier will interrupt the current update cycle and will |
||
2053 | * restart it if it detects the need to flip the placement. |
||
2054 | * @memberof modifiers |
||
2055 | * @inner |
||
2056 | */ |
||
2057 | flip: { |
||
2058 | /** @prop {number} order=600 - Index used to define the order of execution */ |
||
2059 | order: 600, |
||
2060 | /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */ |
||
2061 | enabled: true, |
||
2062 | /** @prop {ModifierFn} */ |
||
2063 | fn: flip, |
||
2064 | /** |
||
2065 | * @prop {String|Array} behavior='flip' |
||
2066 | * The behavior used to change the popper's placement. It can be one of |
||
2067 | * `flip`, `clockwise`, `counterclockwise` or an array with a list of valid |
||
2068 | * placements (with optional variations). |
||
2069 | */ |
||
2070 | behavior: 'flip', |
||
2071 | /** |
||
2072 | * @prop {number} padding=5 |
||
2073 | * The popper will flip if it hits the edges of the `boundariesElement` |
||
2074 | */ |
||
2075 | padding: 5, |
||
2076 | /** |
||
2077 | * @prop {String|HTMLElement} boundariesElement='viewport' |
||
2078 | * The element which will define the boundaries of the popper position, |
||
2079 | * the popper will never be placed outside of the defined boundaries |
||
2080 | * (except if keepTogether is enabled) |
||
2081 | */ |
||
2082 | boundariesElement: 'viewport' |
||
2083 | }, |
||
2084 | |||
2085 | /** |
||
2086 | * Modifier used to make the popper flow toward the inner of the reference element. |
||
2087 | * By default, when this modifier is disabled, the popper will be placed outside |
||
2088 | * the reference element. |
||
2089 | * @memberof modifiers |
||
2090 | * @inner |
||
2091 | */ |
||
2092 | inner: { |
||
2093 | /** @prop {number} order=700 - Index used to define the order of execution */ |
||
2094 | order: 700, |
||
2095 | /** @prop {Boolean} enabled=false - Whether the modifier is enabled or not */ |
||
2096 | enabled: false, |
||
2097 | /** @prop {ModifierFn} */ |
||
2098 | fn: inner |
||
2099 | }, |
||
2100 | |||
2101 | /** |
||
2102 | * Modifier used to hide the popper when its reference element is outside of the |
||
2103 | * popper boundaries. It will set a `x-out-of-boundaries` attribute which can |
||
2104 | * be used to hide with a CSS selector the popper when its reference is |
||
2105 | * out of boundaries. |
||
2106 | * |
||
2107 | * Requires the `preventOverflow` modifier before it in order to work. |
||
2108 | * @memberof modifiers |
||
2109 | * @inner |
||
2110 | */ |
||
2111 | hide: { |
||
2112 | /** @prop {number} order=800 - Index used to define the order of execution */ |
||
2113 | order: 800, |
||
2114 | /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */ |
||
2115 | enabled: true, |
||
2116 | /** @prop {ModifierFn} */ |
||
2117 | fn: hide |
||
2118 | }, |
||
2119 | |||
2120 | /** |
||
2121 | * Computes the style that will be applied to the popper element to gets |
||
2122 | * properly positioned. |
||
2123 | * |
||
2124 | * Note that this modifier will not touch the DOM, it just prepares the styles |
||
2125 | * so that `applyStyle` modifier can apply it. This separation is useful |
||
2126 | * in case you need to replace `applyStyle` with a custom implementation. |
||
2127 | * |
||
2128 | * This modifier has `850` as `order` value to maintain backward compatibility |
||
2129 | * with previous versions of Popper.js. Expect the modifiers ordering method |
||
2130 | * to change in future major versions of the library. |
||
2131 | * |
||
2132 | * @memberof modifiers |
||
2133 | * @inner |
||
2134 | */ |
||
2135 | computeStyle: { |
||
2136 | /** @prop {number} order=850 - Index used to define the order of execution */ |
||
2137 | order: 850, |
||
2138 | /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */ |
||
2139 | enabled: true, |
||
2140 | /** @prop {ModifierFn} */ |
||
2141 | fn: computeStyle, |
||
2142 | /** |
||
2143 | * @prop {Boolean} gpuAcceleration=true |
||
2144 | * If true, it uses the CSS 3d transformation to position the popper. |
||
2145 | * Otherwise, it will use the `top` and `left` properties. |
||
2146 | */ |
||
2147 | gpuAcceleration: true, |
||
2148 | /** |
||
2149 | * @prop {string} [x='bottom'] |
||
2150 | * Where to anchor the X axis (`bottom` or `top`). AKA X offset origin. |
||
2151 | * Change this if your popper should grow in a direction different from `bottom` |
||
2152 | */ |
||
2153 | x: 'bottom', |
||
2154 | /** |
||
2155 | * @prop {string} [x='left'] |
||
2156 | * Where to anchor the Y axis (`left` or `right`). AKA Y offset origin. |
||
2157 | * Change this if your popper should grow in a direction different from `right` |
||
2158 | */ |
||
2159 | y: 'right' |
||
2160 | }, |
||
2161 | |||
2162 | /** |
||
2163 | * Applies the computed styles to the popper element. |
||
2164 | * |
||
2165 | * All the DOM manipulations are limited to this modifier. This is useful in case |
||
2166 | * you want to integrate Popper.js inside a framework or view library and you |
||
2167 | * want to delegate all the DOM manipulations to it. |
||
2168 | * |
||
2169 | * Note that if you disable this modifier, you must make sure the popper element |
||
2170 | * has its position set to `absolute` before Popper.js can do its work! |
||
2171 | * |
||
2172 | * Just disable this modifier and define you own to achieve the desired effect. |
||
2173 | * |
||
2174 | * @memberof modifiers |
||
2175 | * @inner |
||
2176 | */ |
||
2177 | applyStyle: { |
||
2178 | /** @prop {number} order=900 - Index used to define the order of execution */ |
||
2179 | order: 900, |
||
2180 | /** @prop {Boolean} enabled=true - Whether the modifier is enabled or not */ |
||
2181 | enabled: true, |
||
2182 | /** @prop {ModifierFn} */ |
||
2183 | fn: applyStyle, |
||
2184 | /** @prop {Function} */ |
||
2185 | onLoad: applyStyleOnLoad, |
||
2186 | /** |
||
2187 | * @deprecated since version 1.10.0, the property moved to `computeStyle` modifier |
||
2188 | * @prop {Boolean} gpuAcceleration=true |
||
2189 | * If true, it uses the CSS 3d transformation to position the popper. |
||
2190 | * Otherwise, it will use the `top` and `left` properties. |
||
2191 | */ |
||
2192 | gpuAcceleration: undefined |
||
2193 | } |
||
2194 | }; |
||
2195 | |||
2196 | /** |
||
2197 | * The `dataObject` is an object containing all the informations used by Popper.js |
||
2198 | * this object get passed to modifiers and to the `onCreate` and `onUpdate` callbacks. |
||
2199 | * @name dataObject |
||
2200 | * @property {Object} data.instance The Popper.js instance |
||
2201 | * @property {String} data.placement Placement applied to popper |
||
2202 | * @property {String} data.originalPlacement Placement originally defined on init |
||
2203 | * @property {Boolean} data.flipped True if popper has been flipped by flip modifier |
||
2204 | * @property {Boolean} data.hide True if the reference element is out of boundaries, useful to know when to hide the popper. |
||
2205 | * @property {HTMLElement} data.arrowElement Node used as arrow by arrow modifier |
||
2206 | * @property {Object} data.styles Any CSS property defined here will be applied to the popper, it expects the JavaScript nomenclature (eg. `marginBottom`) |
||
2207 | * @property {Object} data.arrowStyles Any CSS property defined here will be applied to the popper arrow, it expects the JavaScript nomenclature (eg. `marginBottom`) |
||
2208 | * @property {Object} data.boundaries Offsets of the popper boundaries |
||
2209 | * @property {Object} data.offsets The measurements of popper, reference and arrow elements. |
||
2210 | * @property {Object} data.offsets.popper `top`, `left`, `width`, `height` values |
||
2211 | * @property {Object} data.offsets.reference `top`, `left`, `width`, `height` values |
||
2212 | * @property {Object} data.offsets.arrow] `top` and `left` offsets, only one of them will be different from 0 |
||
2213 | */ |
||
2214 | |||
2215 | /** |
||
2216 | * Default options provided to Popper.js constructor.<br /> |
||
2217 | * These can be overriden using the `options` argument of Popper.js.<br /> |
||
2218 | * To override an option, simply pass as 3rd argument an object with the same |
||
2219 | * structure of this object, example: |
||
2220 | * ``` |
||
2221 | * new Popper(ref, pop, { |
||
2222 | * modifiers: { |
||
2223 | * preventOverflow: { enabled: false } |
||
2224 | * } |
||
2225 | * }) |
||
2226 | * ``` |
||
2227 | * @type {Object} |
||
2228 | * @static |
||
2229 | * @memberof Popper |
||
2230 | */ |
||
2231 | var Defaults = { |
||
2232 | /** |
||
2233 | * Popper's placement |
||
2234 | * @prop {Popper.placements} placement='bottom' |
||
2235 | */ |
||
2236 | placement: 'bottom', |
||
2237 | |||
2238 | /** |
||
2239 | * Whether events (resize, scroll) are initially enabled |
||
2240 | * @prop {Boolean} eventsEnabled=true |
||
2241 | */ |
||
2242 | eventsEnabled: true, |
||
2243 | |||
2244 | /** |
||
2245 | * Set to true if you want to automatically remove the popper when |
||
2246 | * you call the `destroy` method. |
||
2247 | * @prop {Boolean} removeOnDestroy=false |
||
2248 | */ |
||
2249 | removeOnDestroy: false, |
||
2250 | |||
2251 | /** |
||
2252 | * Callback called when the popper is created.<br /> |
||
2253 | * By default, is set to no-op.<br /> |
||
2254 | * Access Popper.js instance with `data.instance`. |
||
2255 | * @prop {onCreate} |
||
2256 | */ |
||
2257 | onCreate: function onCreate() {}, |
||
2258 | |||
2259 | /** |
||
2260 | * Callback called when the popper is updated, this callback is not called |
||
2261 | * on the initialization/creation of the popper, but only on subsequent |
||
2262 | * updates.<br /> |
||
2263 | * By default, is set to no-op.<br /> |
||
2264 | * Access Popper.js instance with `data.instance`. |
||
2265 | * @prop {onUpdate} |
||
2266 | */ |
||
2267 | onUpdate: function onUpdate() {}, |
||
2268 | |||
2269 | /** |
||
2270 | * List of modifiers used to modify the offsets before they are applied to the popper. |
||
2271 | * They provide most of the functionalities of Popper.js |
||
2272 | * @prop {modifiers} |
||
2273 | */ |
||
2274 | modifiers: modifiers |
||
2275 | }; |
||
2276 | |||
2277 | /** |
||
2278 | * @callback onCreate |
||
2279 | * @param {dataObject} data |
||
2280 | */ |
||
2281 | |||
2282 | /** |
||
2283 | * @callback onUpdate |
||
2284 | * @param {dataObject} data |
||
2285 | */ |
||
2286 | |||
2287 | // Utils |
||
2288 | // Methods |
||
2289 | var Popper = function () { |
||
2290 | /** |
||
2291 | * Create a new Popper.js instance |
||
2292 | * @class Popper |
||
2293 | * @param {HTMLElement|referenceObject} reference - The reference element used to position the popper |
||
2294 | * @param {HTMLElement} popper - The HTML element used as popper. |
||
2295 | * @param {Object} options - Your custom options to override the ones defined in [Defaults](#defaults) |
||
2296 | * @return {Object} instance - The generated Popper.js instance |
||
2297 | */ |
||
2298 | function Popper(reference, popper) { |
||
2299 | var _this = this; |
||
2300 | |||
2301 | var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; |
||
2302 | classCallCheck(this, Popper); |
||
2303 | |||
2304 | this.scheduleUpdate = function () { |
||
2305 | return requestAnimationFrame(_this.update); |
||
2306 | }; |
||
2307 | |||
2308 | // make update() debounced, so that it only runs at most once-per-tick |
||
2309 | this.update = debounce(this.update.bind(this)); |
||
2310 | |||
2311 | // with {} we create a new object with the options inside it |
||
2312 | this.options = _extends({}, Popper.Defaults, options); |
||
2313 | |||
2314 | // init state |
||
2315 | this.state = { |
||
2316 | isDestroyed: false, |
||
2317 | isCreated: false, |
||
2318 | scrollParents: [] |
||
2319 | }; |
||
2320 | |||
2321 | // get reference and popper elements (allow jQuery wrappers) |
||
2322 | this.reference = reference && reference.jquery ? reference[0] : reference; |
||
2323 | this.popper = popper && popper.jquery ? popper[0] : popper; |
||
2324 | |||
2325 | // Deep merge modifiers options |
||
2326 | this.options.modifiers = {}; |
||
2327 | Object.keys(_extends({}, Popper.Defaults.modifiers, options.modifiers)).forEach(function (name) { |
||
2328 | _this.options.modifiers[name] = _extends({}, Popper.Defaults.modifiers[name] || {}, options.modifiers ? options.modifiers[name] : {}); |
||
2329 | }); |
||
2330 | |||
2331 | // Refactoring modifiers' list (Object => Array) |
||
2332 | this.modifiers = Object.keys(this.options.modifiers).map(function (name) { |
||
2333 | return _extends({ |
||
2334 | name: name |
||
2335 | }, _this.options.modifiers[name]); |
||
2336 | }) |
||
2337 | // sort the modifiers by order |
||
2338 | .sort(function (a, b) { |
||
2339 | return a.order - b.order; |
||
2340 | }); |
||
2341 | |||
2342 | // modifiers have the ability to execute arbitrary code when Popper.js get inited |
||
2343 | // such code is executed in the same order of its modifier |
||
2344 | // they could add new properties to their options configuration |
||
2345 | // BE AWARE: don't add options to `options.modifiers.name` but to `modifierOptions`! |
||
2346 | this.modifiers.forEach(function (modifierOptions) { |
||
2347 | if (modifierOptions.enabled && isFunction(modifierOptions.onLoad)) { |
||
2348 | modifierOptions.onLoad(_this.reference, _this.popper, _this.options, modifierOptions, _this.state); |
||
2349 | } |
||
2350 | }); |
||
2351 | |||
2352 | // fire the first update to position the popper in the right place |
||
2353 | this.update(); |
||
2354 | |||
2355 | var eventsEnabled = this.options.eventsEnabled; |
||
2356 | if (eventsEnabled) { |
||
2357 | // setup event listeners, they will take care of update the position in specific situations |
||
2358 | this.enableEventListeners(); |
||
2359 | } |
||
2360 | |||
2361 | this.state.eventsEnabled = eventsEnabled; |
||
2362 | } |
||
2363 | |||
2364 | // We can't use class properties because they don't get listed in the |
||
2365 | // class prototype and break stuff like Sinon stubs |
||
2366 | |||
2367 | |||
2368 | createClass(Popper, [{ |
||
2369 | key: 'update', |
||
2370 | value: function update$$1() { |
||
2371 | return update.call(this); |
||
2372 | } |
||
2373 | }, { |
||
2374 | key: 'destroy', |
||
2375 | value: function destroy$$1() { |
||
2376 | return destroy.call(this); |
||
2377 | } |
||
2378 | }, { |
||
2379 | key: 'enableEventListeners', |
||
2380 | value: function enableEventListeners$$1() { |
||
2381 | return enableEventListeners.call(this); |
||
2382 | } |
||
2383 | }, { |
||
2384 | key: 'disableEventListeners', |
||
2385 | value: function disableEventListeners$$1() { |
||
2386 | return disableEventListeners.call(this); |
||
2387 | } |
||
2388 | |||
2389 | /** |
||
2390 | * Schedule an update, it will run on the next UI update available |
||
2391 | * @method scheduleUpdate |
||
2392 | * @memberof Popper |
||
2393 | */ |
||
2394 | |||
2395 | |||
2396 | /** |
||
2397 | * Collection of utilities useful when writing custom modifiers. |
||
2398 | * Starting from version 1.7, this method is available only if you |
||
2399 | * include `popper-utils.js` before `popper.js`. |
||
2400 | * |
||
2401 | * **DEPRECATION**: This way to access PopperUtils is deprecated |
||
2402 | * and will be removed in v2! Use the PopperUtils module directly instead. |
||
2403 | * Due to the high instability of the methods contained in Utils, we can't |
||
2404 | * guarantee them to follow semver. Use them at your own risk! |
||
2405 | * @static |
||
2406 | * @private |
||
2407 | * @type {Object} |
||
2408 | * @deprecated since version 1.8 |
||
2409 | * @member Utils |
||
2410 | * @memberof Popper |
||
2411 | */ |
||
2412 | |||
2413 | }]); |
||
2414 | return Popper; |
||
2415 | }(); |
||
2416 | |||
2417 | /** |
||
2418 | * The `referenceObject` is an object that provides an interface compatible with Popper.js |
||
2419 | * and lets you use it as replacement of a real DOM node.<br /> |
||
2420 | * You can use this method to position a popper relatively to a set of coordinates |
||
2421 | * in case you don't have a DOM node to use as reference. |
||
2422 | * |
||
2423 | * ``` |
||
2424 | * new Popper(referenceObject, popperNode); |
||
2425 | * ``` |
||
2426 | * |
||
2427 | * NB: This feature isn't supported in Internet Explorer 10 |
||
2428 | * @name referenceObject |
||
2429 | * @property {Function} data.getBoundingClientRect |
||
2430 | * A function that returns a set of coordinates compatible with the native `getBoundingClientRect` method. |
||
2431 | * @property {number} data.clientWidth |
||
2432 | * An ES6 getter that will return the width of the virtual reference element. |
||
2433 | * @property {number} data.clientHeight |
||
2434 | * An ES6 getter that will return the height of the virtual reference element. |
||
2435 | */ |
||
2436 | |||
2437 | |||
2438 | Popper.Utils = (typeof window !== 'undefined' ? window : global).PopperUtils; |
||
2439 | Popper.placements = placements; |
||
2440 | Popper.Defaults = Defaults; |
||
2441 | |||
2442 | return Popper; |
||
2443 | |||
2444 | }))); |
||
2445 | //# sourceMappingURL=popper.js.map |
||
2446 |